import { type HTMLAttributes, type ReactNode } from "react";
import { cn } from "@/lib/utils";
import { Card } from "./card";

export interface KpiCardProps extends HTMLAttributes<HTMLDivElement> {
  label: string;
  value: ReactNode;
  hint?: string;
  icon?: ReactNode;
  accent?: "default" | "success" | "warning";
  compact?: boolean;
}

const accentClasses = {
  default: "text-brand-green",
  success: "text-success-green",
  warning: "text-warning-amber",
} as const;

export function KpiCard({
  label,
  value,
  hint,
  icon,
  accent = "default",
  compact = false,
  className,
  ...props
}: KpiCardProps) {
  return (
    <Card
      padding={compact ? "sm" : "md"}
      className={cn("flex flex-col gap-2", className)}
      {...props}
    >
      <div className="flex items-start justify-between gap-2">
        <span className="font-inter text-xs font-medium uppercase tracking-wide text-muted">
          {label}
        </span>
        {icon ? (
          <span className={cn("shrink-0", accentClasses[accent])} aria-hidden="true">
            {icon}
          </span>
        ) : null}
      </div>
      <div
        className={cn(
          "font-onest font-bold leading-none text-ink",
          compact ? "text-2xl" : "text-3xl",
        )}
      >
        {value}
      </div>
      {hint ? (
        <p className="font-inter text-xs text-muted">{hint}</p>
      ) : null}
    </Card>
  );
}