import { cn } from "@/lib/utils"

interface MetricCardProps {
  title: string
  value: string | number
  subtitle?: string
  variant?: "default" | "primary" | "success" | "accent"
  className?: string
}

const variants = {
  default: "bg-white",
  primary: "bg-primary/10 border-primary/20",
  success: "bg-success/10 border-success/20",
  accent: "bg-accent/10 border-accent/20",
}

export function MetricCard({ title, value, subtitle, variant = "default", className }: MetricCardProps) {
  return (
    <div className={cn("rounded-2xl p-4 shadow-sm border border-border", variants[variant], className)}>
      <p className="text-sm text-muted-foreground">{title}</p>
      <p className="text-3xl font-display font-bold text-foreground mt-1">{value}</p>
      {subtitle && <p className="text-xs text-muted-foreground mt-1">{subtitle}</p>}
    </div>
  )
}