import type { JSX } from 'preact';
import { cn } from './cn';

export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
export type ButtonSize = 'sm' | 'md';

export type ButtonProps = JSX.HTMLAttributes<HTMLButtonElement> & {
  variant?: ButtonVariant;
  size?: ButtonSize;
  disabled?: boolean;
  type?: 'button' | 'submit' | 'reset';
};

const VARIANT: Record<ButtonVariant, string> = {
  primary: 'ask-theme-btn-primary',
  secondary: 'ask-theme-btn-secondary',
  ghost: 'ask-theme-btn-ghost',
  danger: 'ask-theme-btn-danger',
};

const SIZE: Record<ButtonSize, string> = {
  sm: 'ask-h-8 ask-px-3 ask-text-[12px]',
  md: 'ask-h-9 ask-px-4 ask-text-[13px]',
};

export function Button({
  variant = 'secondary',
  size = 'md',
  className,
  disabled,
  ...props
}: ButtonProps) {
  return (
    <button
      type={(props as any).type ?? 'button'}
      disabled={disabled}
      className={cn(
        'ask-theme-btn ask-inline-flex ask-shrink-0 ask-items-center ask-justify-center ask-gap-2 ask-whitespace-nowrap ask-leading-none ask-rounded-full ask-border ask-font-medium ask-transition',
        SIZE[size],
        VARIANT[variant],
        disabled && 'ask-opacity-50 ask-pointer-events-none',
        className
      )}
      {...props}
    />
  );
}
