edr-platform/apps/edr-freight-web/backoffice/src/components/bookings/BookingStatGrid.tsx

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

export interface StatItem {
  label: string;
  value: number | string;
  hint?: string;
  icon: LucideIcon;
  accent?: "default" | "amber" | "emerald" | "rose";
}

const accentStyles = {
  default: "bg-primary/10 text-primary",
  amber: "bg-amber-500/10 text-amber-700 dark:text-amber-400",
  emerald: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400",
  rose: "bg-rose-500/10 text-rose-700 dark:text-rose-400",
};

export function BookingStatGrid({ items }: { items: StatItem[] }) {
  return (
    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
      {items.map((item) => {
        const Icon = item.icon;
        const accent = item.accent ?? "default";
        return (
          <div
            key={item.label}
            className="group relative overflow-hidden rounded-xl border border-border bg-card p-5 shadow-sm transition-all duration-200 hover:border-primary/20 hover:shadow-md"
          >
            <div className="flex items-start justify-between gap-3">
              <div className="min-w-0 flex-1">
                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                  {item.label}
                </p>
                <p className="mt-2 text-3xl font-bold tabular-nums tracking-tight text-foreground">
                  {item.value}
                </p>
                {item.hint && (
                  <p className="mt-1 text-xs text-muted-foreground">{item.hint}</p>
                )}
              </div>
              <div
                className={cn(
                  "flex size-11 shrink-0 items-center justify-center rounded-xl transition-transform duration-200 group-hover:scale-105",
                  accentStyles[accent],
                )}
              >
                <Icon className="size-5" strokeWidth={2} />
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}