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

/**
 * Button class names shared by server and client components. Kept out of "use client" modules:
 * calling a function exported from a client module inside a server component fails at runtime.
 */
const VARIANTS = {
  primary: "bg-cta text-cta-foreground hover:opacity-90",
  default: "bg-primary text-primary-foreground hover:opacity-90",
  outline: "border border-border bg-background hover:bg-muted",
  danger: "border border-[var(--risk)] bg-background text-[var(--risk)] hover:bg-muted",
  ghost: "hover:bg-muted text-muted-foreground",
} as const;

export type ButtonVariant = keyof typeof VARIANTS;

export const buttonCls = (variant: ButtonVariant = "default") =>
  cn(
    "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg px-4 font-heading text-sm font-semibold transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none disabled:opacity-50",
    VARIANTS[variant],
  );