import type { ButtonHTMLAttributes, ReactNode } from "react";

type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
type ButtonSize = "sm" | "md" | "icon";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  icon?: ReactNode;
}

export function Button({ className = "", variant = "primary", size = "md", icon, children, ...props }: ButtonProps) {
  const classes = ["button", `button--${variant}`, `button--${size}`, className].filter(Boolean).join(" ");

  return (
    <button className={classes} {...props}>
      {icon}
      {children ? <span>{children}</span> : null}
    </button>
  );
}