import type { ButtonHTMLAttributes } from "react";
import { cn } from "@/lib/utils";

/** One button language for the whole CMS (ShowOff style): fully rounded, bold, 40px high. Colours come from --btn-* tokens. */
export type ButtonVariant = "primary" | "secondary" | "grey" | "ghost" | "danger" | "success";

const variants: Record<ButtonVariant, string> = {
  primary: "bg-[var(--btn-primary)] text-[var(--btn-primary-fg)] hover:brightness-110",
  secondary: "border-2 border-[var(--btn-outline)] bg-transparent text-[var(--btn-outline)] hover:bg-[var(--btn-hover)]",
  grey: "bg-[var(--btn-grey)] text-[var(--btn-grey-fg)] hover:brightness-95",
  ghost: "text-[var(--btn-ghost-fg)] hover:bg-[var(--btn-hover)]",
  danger: "bg-[var(--btn-danger)] text-white hover:brightness-110",
  success: "bg-[var(--btn-success)] text-white hover:brightness-110",
};

export function buttonClass(variant: ButtonVariant = "primary", className?: string) {
  return cn(
    "inline-flex h-10 items-center justify-center gap-2 whitespace-nowrap rounded-full px-5 text-sm font-bold transition cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
    variants[variant],
    className,
  );
}

export function Button({
  variant = "primary",
  className,
  type = "button",
  ...props
}: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: ButtonVariant }) {
  return <button type={type} className={buttonClass(variant, className)} {...props} />;
}