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

export type AppButtonStyle = "filled" | "tinted" | "gray" | "plain" | "destructive";
export type AppButtonSize = "large" | "medium" | "small";

type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
  label?: ReactNode;
  children?: ReactNode;
  buttonStyle?: AppButtonStyle;
  size?: AppButtonSize;
  expanded?: boolean;
  loading?: boolean;
};

export function AppButton({
  label,
  children,
  buttonStyle = "filled",
  size = "large",
  expanded = true,
  loading = false,
  className = "",
  disabled,
  type = "button",
  ...rest
}: Props) {
  const classes = [
    "app-btn",
    `app-btn--${buttonStyle}`,
    `app-btn--${size}`,
    expanded ? "app-btn--expanded" : "",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <button type={type} className={classes} disabled={disabled || loading} {...rest}>
      {loading ? <span className="app-spinner" aria-hidden="true" /> : (label ?? children)}
    </button>
  );
}