import { clsx } from "clsx";

type Variante = "primaer" | "sekundaer" | "gefahr";

const VARIANTEN: Record<Variante, string> = {
  primaer: "bg-akzent text-akzent-text hover:opacity-90",
  sekundaer: "border border-linie bg-panel-hoch text-text hover:border-muted",
  gefahr: "border border-fehler text-fehler hover:bg-fehler/10",
};

/** Ein echter `<button>`; 40 px hoch, am Handy 44 px (Tippfläche). */
export function Knopf({
  variante = "primaer",
  className,
  ...rest
}: React.ButtonHTMLAttributes<HTMLButtonElement> & { variante?: Variante }) {
  return (
    <button
      type="button"
      {...rest}
      className={clsx(
        "inline-flex h-11 items-center justify-center gap-2 rounded-lg px-4 text-sm font-semibold transition sm:h-10",
        "disabled:cursor-not-allowed disabled:opacity-50",
        VARIANTEN[variante],
        className,
      )}
    />
  );
}