import * as React from "react";
import { cn } from "@/lib/utils";

export function Stat({ label, value, hint, delta, className, mono = true }: { label: React.ReactNode; value: React.ReactNode; hint?: React.ReactNode; delta?: { value: number; label?: string } | null; className?: string; mono?: boolean }) {
  return (
    <div className={cn("flex flex-col gap-1 px-5 py-4", className)}>
      <div className="text-[12px] font-medium text-fg-subtle">{label}</div>
      <div className={cn("text-[22px] font-semibold leading-none tracking-tight tabular", mono && "font-mono")}>{value}</div>
      {hint || delta ? (
        <div className="flex items-center gap-2 text-[12px] text-fg-muted">
          {delta ? <span className={cn("font-medium tabular", delta.value >= 0 ? "text-success" : "text-danger")}>{delta.value >= 0 ? "+" : ""}{delta.value.toFixed(1)}%</span> : null}
          {hint}
        </div>
      ) : null}
    </div>
  );
}

export function StatGrid({ children, className, cols = 4 }: { children: React.ReactNode; className?: string; cols?: 2 | 3 | 4 | 5 | 6 }) {
  return (
    <div
      className={cn(
        "grid divide-y divide-border rounded-lg border border-border bg-bg-elevated shadow-xs sm:divide-y-0 sm:divide-x [&>*]:min-w-0",
        cols === 2 && "sm:grid-cols-2",
        cols === 3 && "sm:grid-cols-3",
        cols === 4 && "sm:grid-cols-2 lg:grid-cols-4 sm:[&>*:nth-child(2)]:border-r-0 lg:[&>*:nth-child(2)]:border-r sm:[&>*:nth-child(n+3)]:border-t lg:[&>*:nth-child(n+3)]:border-t-0",
        cols === 5 && "sm:grid-cols-5",
        cols === 6 && "sm:grid-cols-3 lg:grid-cols-6 sm:[&>*:nth-child(n+4)]:border-t lg:[&>*:nth-child(n+4)]:border-t-0",
        className,
      )}
    >
      {children}
    </div>
  );
}