/** Primary action button with press-scale feedback. */

import type { ComponentChildren, JSX } from "preact";
import { Pressable } from "./Pressable";

type Variant = "primary" | "secondary" | "destructive" | "plain";

type ButtonProps = {
  children: ComponentChildren;
  variant?: Variant;
  disabled?: boolean;
  type?: "button" | "submit";
  onClick?: JSX.MouseEventHandler<HTMLElement>;
  className?: string;
  ariaLabel?: string;
};

const variantClass: Record<Variant, string> = {
  primary: "btn btn-primary",
  secondary: "btn btn-secondary",
  destructive: "btn btn-destructive",
  plain: "btn btn-plain",
};

export function Button({
  children,
  variant = "primary",
  disabled = false,
  type = "button",
  onClick,
  className = "",
  ariaLabel,
}: ButtonProps) {
  return (
    <Pressable
      type={type}
      disabled={disabled}
      onClick={onClick}
      ariaLabel={ariaLabel}
      className={`${variantClass[variant]} ${className}`.trim()}
    >
      {children}
    </Pressable>
  );
}