import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { cn } from '@/lib/utils';

interface MetricCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  icon?: React.ReactNode;
  valueClassName?: string;
  progress?: {
    value: number;
    max: number;
    label?: string;
  };
}

export function MetricCard({ 
  title, 
  value, 
  subtitle, 
  icon,
  valueClassName,
  progress 
}: MetricCardProps) {
  return (
    <Card className="p-3">
      <CardHeader className="p-0 pb-2">
        <div className="flex items-center justify-between">
          <h4 className="text-sm font-medium text-text-secondary">{title}</h4>
          {icon && <div className="text-text-muted">{icon}</div>}
        </div>
      </CardHeader>
      <CardContent className="p-0">
        <div className={cn('text-xl font-semibold text-text-primary', valueClassName)}>
          {value}
        </div>
        {subtitle && (
          <p className="text-xs text-text-muted mt-1">{subtitle}</p>
        )}
        {progress && (
          <div className="mt-3">
            <div className="flex justify-between text-xs text-text-secondary mb-1">
              <span>{progress.label || 'Usage'}</span>
              <span>{((progress.value / progress.max) * 100).toFixed(0)}%</span>
            </div>
            <div className="w-full bg-surface-tertiary rounded-full h-2">
              <div
                className="bg-primary-500 h-2 rounded-full transition-all"
                style={{ width: `${Math.min((progress.value / progress.max) * 100, 100)}%` }}
              />
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}