Credit Usage Card

import { CreditUsageCard } from '@/blocks/data-display/credit-usage-card'

// Basic usage
<CreditUsageCard
 creditsUsed={56.4}
 totalCredits={100}
 usageHistory={[
 { date: 'Jan 5, 09:26 PM', model: 'Claude 4.5', credits: '641.5K', cost: '$0.54' },
 { date: 'Jan 5, 09:21 PM', model: 'Claude 4.5', credits: '334.1K', cost: '$0.27' },
 ]}
/>

// With state management
const [autoSwitch, setAutoSwitch] = useState(true)
const [period, setPeriod] = useState('30')

<CreditUsageCard
 creditsUsed={56.4}
 totalCredits={100}
 autoSwitch={autoSwitch}
 onAutoSwitchChange={setAutoSwitch}
 selectedPeriod={period}
 onPeriodChange={setPeriod}
 usageHistory={usageData}
 onViewAll={() => router.push('/usage')}
 onAction={() => router.push('/billing')}
/>

// Custom units
<CreditUsageCard
 creditsUsed={7.2}
 totalCredits={10}
 creditUnit="GB"
 footerNote="Storage billing is monthly"
 actionLabel="Upgrade storage"
/>

// Graph variant with area chart
<CreditUsageCard
 variant="graph"
 creditsUsed={56.4}
 totalCredits={100}
 usageChartData={[
 { date: 'Dec 26', credits: 1200 },
 { date: 'Dec 27', credits: 1800 },
 { date: 'Dec 28', credits: 950 },
 // ...
 ]}
 selectedPeriod={period}
 onPeriodChange={setPeriod}
/>