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

export type ButtonProps = {
  variant?: "primary" | "secondary" | "danger" | "ghost";
  size?: "md" | "lg";
  icon?: ReactNode;
  loading?: boolean;
} & ButtonHTMLAttributes<HTMLButtonElement>;

export function Button({ variant = "secondary", size = "md", icon, loading, className, children, disabled, type = "button", ...rest }: ButtonProps) {
  const cls = ["ui-btn", `ui-btn--${variant}`, `ui-btn--${size}`, className].filter(Boolean).join(" ");
  return (
    <button {...rest} type={type} className={cls} disabled={disabled || loading} aria-busy={loading ? "true" : undefined}>
      {loading ? <span className="ui-spinner" aria-hidden="true" /> : icon}
      {children}
    </button>
  );
}

export function IconButton({ label, icon, className, title, type = "button", ...rest }: { label: string; icon: ReactNode } & ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button {...rest} type={type} className={["ui-icon-btn", className].filter(Boolean).join(" ")} aria-label={label} title={title ?? label}>
      {icon}
    </button>
  );
}