postdown/components/form/Button.tsx

import { JSX } from "preact";

interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "default" | "primary" | "danger" | "danger-outline";
  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 dark:border-gray-600 rounded";

  const variantClasses = {
    default: "bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100",
    primary: "bg-blue-600 text-white border-blue-600",
    danger: "bg-red-600 text-white border-red-600",
    "danger-outline":
      "bg-transparent text-red-600 border-red-600 dark:text-red-400 dark:border-red-400",
  };

  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>
  );
}