/**
 * @param {React.ButtonHTMLAttributes<HTMLButtonElement> & {
 *   variant?: "primary" | "secondary" | "danger" | "ghost",
 *   size?: "default" | "compact"
 * }} props
 */
export function Button({
  variant = "primary",
  size = "default",
  className = "",
  type = "button",
  ...props
}) {
  const classes = [
    "ui-button",
    `ui-button--${variant}`,
    size === "compact" ? "ui-button--compact" : "",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return <button {...props} className={classes} type={type} />;
}