import * as React from 'react';

export interface StatCardProps {
  label: string;
  value: string;
  hint?: string;
  icon?: string;
  tone?: 'slate' | 'emerald' | 'amber' | 'rose' | 'sky';
  trend?: string;
}

const toneMap: Record<NonNullable<StatCardProps['tone']>, string> = {
  slate: 'border-slate-200 bg-white text-slate-900',
  emerald: 'border-emerald-200 bg-emerald-50 text-emerald-950',
  amber: 'border-amber-200 bg-amber-50 text-amber-950',
  rose: 'border-rose-200 bg-rose-50 text-rose-950',
  sky: 'border-sky-200 bg-sky-50 text-sky-950',
};

export function StatCard({
  label,
  value,
  hint,
  icon,
  tone = 'slate',
  trend,
}: StatCardProps) {
  return (
    <div className={`rounded-[1.3rem] border p-4 shadow-[0_8px_24px_rgba(15,23,42,0.04)] ${toneMap[tone]}`}>
      <div className="flex items-start justify-between gap-3">
        <div>
          <p className="text-[10px] font-bold uppercase tracking-[0.18em] opacity-70">{label}</p>
          <p className="mt-2 text-[1.75rem] font-black tracking-tight">{value}</p>
        </div>
        {icon ? (
          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/80 text-lg shadow-sm">
            <span aria-hidden>{icon}</span>
          </div>
        ) : null}
      </div>
      {(hint || trend) ? (
        <div className="mt-3 flex flex-wrap items-center gap-2">
          {hint ? <p className="text-xs opacity-75">{hint}</p> : null}
          {trend ? (
            <span className="rounded-full bg-white/80 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.18em] opacity-80">
              {trend}
            </span>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}