import { Icon, type IconifyIcon } from "@iconify/react";

interface StatCardProps {
  icon: IconifyIcon;
  label: string;
  value: string;
  hint: string;
}

export function StatCard({ icon, label, value, hint }: StatCardProps) {
  return (
    <div className="flex flex-col gap-3 rounded-2xl border border-border bg-surface p-5">
      <div className="flex items-center justify-between">
        <span className="text-sm font-medium text-muted">{label}</span>
        <span className="flex size-9 items-center justify-center rounded-lg bg-accent-soft">
          <Icon icon={icon} width={18} height={18} className="text-accent-soft-foreground" aria-hidden="true" />
        </span>
      </div>
      <p className="text-3xl font-semibold tabular-nums text-foreground">{value}</p>
      <p className="text-xs text-muted">{hint}</p>
    </div>
  );
}