import { Card } from './Card';
import { cn } from '@/lib/utils';
import { Emoji } from '@/components/ui/Emoji';

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

const colorVariants = {
  default: 'text-[var(--foreground)]',
  primary: 'text-[var(--primary)]',
  success: 'text-[var(--success)]',
  warning: 'text-[var(--accent)]',
  destructive: 'text-[var(--destructive)]',
};

export function StatCard({
  title,
  value,
  icon,
  color = 'default',
  className,
}: StatCardProps) {
  return (
    <Card
      variant="glass"
      className={cn('p-6 hover:shadow-lg transition-shadow', className)}
    >
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium text-[var(--muted-foreground)] mb-1">
            {title}
          </p>
          <p className={cn('text-3xl font-bold', colorVariants[color])}>
            {value}
          </p>
        </div>
        {icon && (
          <div className="text-3xl">
            <Emoji emoji={icon} />
          </div>
        )}
      </div>
    </Card>
  );
}
