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

type Gradient = 'blue' | 'green' | 'amber' | 'violet' | 'red' | 'none';

interface CardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  icon?: LucideIcon;
  gradient?: Gradient;
}

const gradientBorder: Record<Gradient, string> = {
  blue: 'border-l-accent-blue',
  green: 'border-l-accent-green',
  amber: 'border-l-accent-amber',
  violet: 'border-l-accent-violet',
  red: 'border-l-accent-red',
  none: 'border-l-border',
};

export function Card({ title, value, subtitle, icon: Icon, gradient = 'none' }: CardProps) {
  return (
    <div
      className={`bg-surface-elevated border border-border rounded-lg p-4 border-l-4 ${gradientBorder[gradient]}`}
    >
      {Icon && <Icon className="w-5 h-5 text-text-muted mb-2" />}
      <p className="text-sm text-text-secondary mb-1">{title}</p>
      <p className="text-2xl font-semibold text-text-primary">{value}</p>
      {subtitle && <p className="text-xs text-text-muted mt-1">{subtitle}</p>}
    </div>
  );
}
