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

export function StatCard({
  label,
  value,
  note,
  icon: Icon
}: {
  label: string;
  value: string | number;
  note?: string;
  icon?: LucideIcon;
}) {
  return (
    <div className="min-w-0 rounded-lg border border-[var(--border)] bg-white p-4 sm:p-5">
      <div className="flex min-w-0 items-start justify-between gap-3">
        <p className="min-w-0 break-words text-sm font-bold leading-6 text-[var(--ink-soft)]">{label}</p>
        {Icon ? <Icon size={19} className="shrink-0 text-[var(--primary)]" aria-hidden /> : null}
      </div>
      <p className="mt-3 break-words text-xl font-black leading-8 sm:mt-4 sm:text-2xl">{value}</p>
      {note ? <p className="mt-1 text-xs leading-6 text-[var(--ink-faint)]">{note}</p> : null}
    </div>
  );
}