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

interface ToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  on?: boolean;
  children: ReactNode;
}

export function ToggleButton({ on, className, children, ...props }: ToggleButtonProps) {
  return (
    <button
      className={cn(
        'cursor-pointer rounded border px-1.5 py-0.5 text-[8px] transition-all duration-150 select-none',
        on
          ? 'border-wing-accent bg-wing-accent text-white'
          : 'border-wing-border bg-wing-card text-wing-muted',
        className,
      )}
      {...props}
    >
      {children}
    </button>
  );
}