import type { ReactNode } from "react";

export type AdminStat = {
  label: string;
  value: number | string;
  tone?: "default" | "success" | "warning" | "danger";
  hint?: ReactNode;
};

const toneAccent: Record<NonNullable<AdminStat["tone"]>, string> = {
  default: "bg-muted-foreground/35",
  success: "bg-emerald-500",
  warning: "bg-amber-500",
  danger: "bg-rose-500",
};

const toneValue: Record<NonNullable<AdminStat["tone"]>, string> = {
  default: "text-foreground",
  success: "text-emerald-700",
  warning: "text-amber-700",
  danger: "text-rose-700",
};

export function AdminStatsStrip({ stats }: { stats: AdminStat[] }) {
  if (stats.length === 0) return null;
  return (
    <div className="-mx-2 flex gap-2.5 overflow-x-auto px-2 pb-1 lg:mx-0 lg:grid lg:grid-flow-col lg:auto-cols-fr lg:px-0">
      {stats.map((stat) => {
        const tone = stat.tone ?? "default";
        return (
          <div
            key={stat.label}
            className="group relative min-w-[9rem] shrink-0 overflow-hidden rounded-2xl border border-border bg-white/75 px-4 py-3.5 transition hover:border-primary/25 hover:bg-white/90"
          >
            <span
              className={`absolute left-0 top-0 h-full w-[3px] ${toneAccent[tone]}`}
              aria-hidden="true"
            />
            <p className="text-[0.66rem] font-bold uppercase tracking-[0.16em] text-muted-foreground">
              {stat.label}
            </p>
            <p
              className={`mt-1.5 font-display text-[1.6rem] font-semibold leading-none ${toneValue[tone]}`}
            >
              {stat.value}
            </p>
            {stat.hint ? (
              <p className="mt-1.5 text-[0.72rem] leading-tight text-muted-foreground">
                {stat.hint}
              </p>
            ) : null}
          </div>
        );
      })}
    </div>
  );
}