import { Card } from '../common/Card';
import clsx from 'clsx';

interface MetricCardProps {
  label: string;
  value: string | number;
  valueColor?: string;
  subtext?: string;
}

export const MetricCard = ({ label, value, valueColor = 'text-white', subtext }: MetricCardProps) => {
  return (
    <Card className="h-full">
      <div className="flex flex-col h-full justify-between">
        <span className="text-sm font-medium text-dark-300 uppercase tracking-wider">{label}</span>
        <div className="mt-2">
          <span className={clsx('text-3xl font-bold tracking-tight', valueColor)}>{value}</span>
          {subtext && <p className="text-xs text-dark-400 mt-1">{subtext}</p>}
        </div>
      </div>
    </Card>
  );
};