import { JSX } from "preact";

interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "default" | "primary" | "danger";
  size?: "sm" | "md" | "lg";
  children: JSX.Element | string;
}

export default function Button({ 
  variant = "default", 
  size = "md", 
  children, 
  className = "", 
  ...props 
}: ButtonProps) {
  const baseClasses = "box-border cursor-pointer font-normal text-sm border border-gray-300 rounded";
  
  const variantClasses = {
    default: "bg-white text-gray-800",
    primary: "bg-blue-600 text-white border-blue-600",
    danger: "bg-red-600 text-white border-red-600"
  };
  
  const sizeClasses = {
    sm: "px-2 py-1 text-xs",
    md: "px-3 py-1.5",
    lg: "px-4 py-2 text-base"
  };
  
  const combinedClasses = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
  
  return (
    <button className={combinedClasses} {...props}>
      {children}
    </button>
  );
}