import type { LucideIcon } from 'lucide-react';

import { Card, CardContent } from '@spoon/ui';

export const MetricCard = ({
  label,
  value,
  note,
  icon: Icon,
}: {
  label: string;
  value: number | string;
  note: string;
  icon: LucideIcon;
}) => (
  <Card className='shadow-none'>
    <CardContent className='p-5'>
      <div className='flex items-center justify-between gap-3'>
        <p className='text-muted-foreground text-sm'>{label}</p>
        <Icon className='text-primary size-4' />
      </div>
      <p className='mt-3 text-3xl font-semibold'>{value}</p>
      <p className='text-muted-foreground mt-1 text-xs'>{note}</p>
    </CardContent>
  </Card>
);
