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

type Variant = "primary" | "ghost" | "danger" | "secondary";
type Size = "sm" | "md" | "lg";

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: Size;
  fullWidth?: boolean;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
  loading?: boolean;
}

const variantClass: Record<Variant, string> = {
  primary:
    "bg-brand-accent text-brand-bg hover:brightness-110 disabled:bg-brand-lines/20 disabled:text-brand-text/40",
  secondary:
    "bg-brand-boxes/40 text-brand-text hover:bg-brand-boxes/60 disabled:opacity-50",
  ghost:
    "bg-transparent text-brand-text hover:bg-brand-lines/10 disabled:opacity-50 border-transparent",
  danger:
    "bg-red-600/80 text-white hover:bg-red-600 disabled:opacity-50",
};

const sizeClass: Record<Size, string> = {
  sm: "px-3 py-1.5 text-sm",
  md: "px-4 py-2 text-base",
  lg: "px-5 py-3 text-base",
};

export default function Button({
  variant = "primary",
  size = "md",
  fullWidth,
  leftIcon,
  rightIcon,
  loading,
  className = "",
  children,
  disabled,
  ...rest
}: Props) {
  return (
    <button
      {...rest}
      disabled={disabled || loading}
      className={[
        "inline-flex items-center justify-center gap-2 rounded-xl font-medium",
        "border border-brand-lines/20 transition-[transform,box-shadow,background] duration-150",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-accent/60",
        "disabled:cursor-not-allowed",
        "glow",
        variantClass[variant],
        sizeClass[size],
        fullWidth ? "w-full" : "",
        className,
      ].join(" ")}
    >
      {leftIcon}
      {children}
      {rightIcon}
    </button>
  );
}
