import * as React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

export type KpiTone = "neutral" | "brand" | "emerald" | "amber" | "violet" | "rose";

const ACCENT: Record<KpiTone, string> = {
  neutral: "border-l-border",
  brand: "border-l-[var(--sag-brand)]",
  emerald: "border-l-emerald-500/70",
  amber: "border-l-amber-500/70",
  violet: "border-l-violet-500/70",
  rose: "border-l-rose-500/70",
};

export function Kpi({
  label,
  value,
  hint,
  tone = "neutral",
  badge,
  className,
}: {
  label: React.ReactNode;
  value: React.ReactNode;
  hint?: React.ReactNode;
  tone?: KpiTone;
  badge?: React.ReactNode;
  className?: string;
}) {
  return (
    <Card className={cn("card-interactive border-l-4", ACCENT[tone], className)}>
      <CardContent className="p-5">
        <div className="flex items-center justify-between gap-2">
          <div className="section-label">{label}</div>
          {badge}
        </div>
        <div className="mt-2 text-2xl md:text-3xl font-semibold stat-value text-foreground">
          {value}
        </div>
        {hint && <div className="mt-1 text-xs text-muted-foreground">{hint}</div>}
      </CardContent>
    </Card>
  );
}

export function KpiStrip({
  children,
  cols = 4,
  className,
}: {
  children: React.ReactNode;
  cols?: 2 | 3 | 4 | 5;
  className?: string;
}) {
  const colClass = {
    2: "grid-cols-2",
    3: "grid-cols-2 md:grid-cols-3",
    4: "grid-cols-2 lg:grid-cols-4",
    5: "grid-cols-2 md:grid-cols-3 lg:grid-cols-5",
  }[cols];
  return <section className={cn("grid gap-4", colClass, className)}>{children}</section>;
}