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

export type IconButtonVariant = 'default' | 'plain';

export type IconButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
  title?: string;
  disabled?: boolean;
  variant?: IconButtonVariant;
};

const VARIANT: Record<IconButtonVariant, string> = {
  default: 'ask-theme-icon-button ask-border',
  plain: 'ask-theme-icon-button-plain ask-border-transparent ask-bg-transparent',
};

export function IconButton({ className, disabled, variant = 'default', ...props }: IconButtonProps) {
  return (
    <button
      type={(props as any).type ?? 'button'}
      disabled={disabled}
      className={cn(
        'ask-inline-flex ask-h-8 ask-w-8 ask-items-center ask-justify-center ask-rounded-full ask-transition',
        VARIANT[variant],
        disabled && 'ask-opacity-50 ask-pointer-events-none',
        className
      )}
      {...props}
    />
  );
}
