import type { ButtonHTMLAttributes } from "react";
import { IconGlyph } from "./IconGlyph";

export interface ButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
  label: string;
  variant?: "primary" | "secondary" | "danger" | "ghost";
  size?: "default" | "compact";
  icon?: string;
  loading?: boolean;
  type?: "button" | "submit" | "reset";
}

export function Button({
  label,
  variant = "primary",
  size = "default",
  icon,
  disabled = false,
  loading = false,
  type = "button",
  className = "",
  ...buttonProps
}: ButtonProps) {
  return (
    <button
      {...buttonProps}
      className={className ? `ui-button ${className} ` : "ui-button "}
      data-variant={variant}
      data-size={size}
      data-loading={loading}
      disabled={disabled}
      type={type}
    >
      {icon ? <IconGlyph name={icon} size="sm" /> : null}
      <span>{loading ? "Loading" : label}</span>
    </button>
  );
}