import type { ButtonHTMLAttributes, ReactNode } from 'react';
import { cn } from '../utils/cn.ts';

interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  active?: boolean;
  size?: 'sm' | 'md';
  children: ReactNode;
}

export function IconButton({ active, size = 'md', className, children, ...props }: IconButtonProps) {
  return (
    <button
      className={cn(
        'flex shrink-0 cursor-pointer items-center justify-center rounded border p-0 transition-all duration-150 select-none',
        'border-wing-border bg-wing-glass text-wing-muted backdrop-blur-lg',
        'hover:text-wing-text hover:border-wing-accent',
        size === 'sm' && 'h-[22px] w-[22px] rounded text-sm',
        size === 'md' && 'h-[29px] w-[29px] rounded text-base',
        active && 'text-wing-accent border-wing-accent',
        className,
      )}
      {...props}
    >
      {children}
    </button>
  );
}
