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

export interface ToggleButtonProps extends JSX.HTMLAttributes<HTMLButtonElement> {
  pressed?: boolean;
  size?: 'sm' | 'md';
}

export function ToggleButton({
  pressed,
  size = 'md',
  className,
  children,
  ...props
}: ToggleButtonProps) {
  const base =
    size === 'sm'
      ? 'ask-h-8 ask-px-2.5 ask-text-[11px]'
      : 'ask-h-9 ask-px-3 ask-text-[12px]';

  return (
    <button
      type="button"
      className={cn(
        'ask-inline-flex ask-items-center ask-justify-center ask-gap-2 ask-rounded-[10px] ask-border ask-border-borderSubtle ask-bg-surfaceAlt hover:ask-bg-surface',
        base,
        pressed && 'ask-border-primary/50 ask-bg-primary/10',
        className,
      )}
      {...props}
    >
      {children}
    </button>
  );
}
