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

type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
type ButtonSize = "sm" | "lg";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode;
  variant?: ButtonVariant;
  size?: ButtonSize;
  className?: string; // Explicitly allow className
}

export function Button({
  children,
  variant = "primary",
  size,
  className = "",
  ...props
}: ButtonProps) {
  // Construct class names based on stylesheet.css
  const variantClass = variant === "primary" ? "btn-primary" :
    variant === "secondary" ? "btn-secondary" :
      variant === "outline" ? "btn-outline" :
        variant === "ghost" ? "btn-ghost" : "";

  const sizeClass = size === "sm" ? "btn-sm" :
    size === "lg" ? "btn-lg" : "";

  return (
    <button
      className={`btn ${variantClass} ${sizeClass} ${className}`.trim()}
      {...props}
    >
      {children}
    </button>
  );
}