import { clsx } from "clsx";
import type { HTMLAttributes, ReactNode } from "react";

export function Card({ className, children, ...props }: HTMLAttributes<HTMLDivElement> & { children: ReactNode }) {
  return (
    <div className={clsx("rounded-lg border border-forest/10 bg-paper/88 p-5 shadow-soft backdrop-blur dark:border-white/10 dark:bg-white/[0.06]", className)} {...props}>
      {children}
    </div>
  );
}

export function StatCard({ label, value, detail, tone = "forest" }: { label: string; value: string; detail: string; tone?: "forest" | "indigo" | "saffron" | "coral" }) {
  const color = {
    forest: "text-forest dark:text-mint",
    indigo: "text-indigo",
    saffron: "text-saffron",
    coral: "text-coral"
  }[tone];

  return (
    <Card className="p-4">
      <p className="text-xs font-semibold uppercase tracking-wide text-ink/50 dark:text-paper/50">{label}</p>
      <p className={`mt-2 font-display text-3xl ${color}`}>{value}</p>
      <p className="mt-1 text-sm text-ink/60 dark:text-paper/60">{detail}</p>
    </Card>
  );
}