import { ReactNode } from 'react';
import { Card } from './Card';
import { cn } from '@/lib/utils';

interface MetricCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  icon?: ReactNode;
  color?: 'default' | 'primary' | 'success' | 'warning' | 'destructive';
  className?: string;
}

const colorVariants = {
  default: {
    title: 'text-[var(--foreground)]',
    value: 'text-[var(--foreground)]',
    border: 'border-[var(--border)] hover:border-[var(--primary)]/50',
  },
  primary: {
    title: 'text-[var(--primary)]',
    value: 'text-[var(--foreground)]',
    border: 'border-[var(--border)] hover:border-[var(--primary)]/50',
  },
  success: {
    title: 'text-[var(--success)]',
    value: 'text-[var(--foreground)]',
    border: 'border-[var(--border)] hover:border-[var(--success)]/50',
  },
  warning: {
    title: 'text-[var(--accent)]',
    value: 'text-[var(--foreground)]',
    border: 'border-[var(--border)] hover:border-[var(--accent)]/50',
  },
  destructive: {
    title: 'text-[var(--destructive)]',
    value: 'text-[var(--foreground)]',
    border: 'border-[var(--border)] hover:border-[var(--destructive)]/50',
  },
};

export function MetricCard({
  title,
  value,
  subtitle,
  icon,
  color = 'default',
  className,
}: MetricCardProps) {
  const colors = colorVariants[color];

  return (
    <Card
      className={cn(
        'p-4 rounded-lg border transition-colors',
        colors.border,
        className
      )}
    >
      <div className="space-y-2">
        <div className={cn('font-medium text-sm', colors.title)}>{title}</div>
        <div className={cn('text-2xl font-bold', colors.value)}>{value}</div>
        {subtitle && (
          <div className="text-sm text-[var(--muted-foreground)]">
            {subtitle}
          </div>
        )}
        {icon && <div className="text-lg">{icon}</div>}
      </div>
    </Card>
  );
}
