import { cn } from "@/lib/utils";

type StatCardProps = {
  label: string;
  value: string;
  hint?: string;
  tone?: "default" | "teal" | "warning" | "danger";
};

export function StatCard({
  label,
  value,
  hint,
  tone = "default"
}: StatCardProps) {
  return (
    <article
      className={cn(
        "ops-metric",
        tone === "teal" && "bg-moss text-white border-moss/80",
        tone === "warning" && "bg-amber-50",
        tone === "danger" && "bg-red-50"
      )}
    >
      <p
        className={cn(
          "text-[11px] font-bold uppercase tracking-[0.05em]",
          tone === "teal" ? "text-white/70" : "text-slate-500"
        )}
      >
        {label}
      </p>
      <p
        className={cn(
          "mt-3 text-[22px] font-semibold leading-8",
          tone === "teal" ? "text-white" : "text-ink"
        )}
      >
        {value}
      </p>
      {hint ? (
        <p
          className={cn(
            "mt-2 text-[13px]",
            tone === "teal" ? "text-white/70" : "text-slate-500"
          )}
        >
          {hint}
        </p>
      ) : null}
    </article>
  );
}

type EmptyStateProps = {
  title: string;
  copy: string;
};

export function EmptyState({ title, copy }: EmptyStateProps) {
  return (
    <div className="px-6 py-8 text-[13px] text-slate-500">
      <p className="font-semibold text-slate-700">{title}</p>
      <p className="mt-2">{copy}</p>
    </div>
  );
}
