import { cn } from "@/lib/utils";
import type { LucideIcon } from "lucide-react";

interface StatCardProps {
  title: string;
  value: string | number;
  subtitle?: string;
  icon?: LucideIcon;
  className?: string;
}

export function StatCard({
  title,
  value,
  subtitle,
  icon: Icon,
  className,
}: StatCardProps) {
  return (
    <div
      className={cn(
        "rounded-lg border border-[var(--border)] bg-[var(--card)] p-4",
        className
      )}
    >
      <div className="flex items-start justify-between">
        <div>
          <p className="text-sm text-[var(--muted-foreground)]">{title}</p>
          <p className="text-2xl font-bold mt-1">{value}</p>
          {subtitle && (
            <p className="text-xs text-[var(--muted-foreground)] mt-1">
              {subtitle}
            </p>
          )}
        </div>
        {Icon && (
          <div className="p-2 rounded-md bg-[var(--primary)]/10">
            <Icon className="h-5 w-5 text-[var(--primary)]" />
          </div>
        )}
      </div>
    </div>
  );
}