import { forwardRef, type InputHTMLAttributes } from 'react';
import { cn } from '@lib/utils/cn';

export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
  label?: string;
}

/** Checkbox — native input에 라벨/스타일만 씌운 가벼운 래퍼 */
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
  ({ className, label, id, ...props }, ref) => {
    const inputId = id ?? `cb-${Math.random().toString(36).slice(2, 8)}`;
    return (
      <label htmlFor={inputId} className="inline-flex items-center gap-1.5 cursor-pointer select-none">
        <input
          ref={ref}
          id={inputId}
          type="checkbox"
          className={cn(
            'w-3.5 h-3.5 rounded border-slate-600/60 bg-surface-overlay',
            'accent-blue-500 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50',
            className,
          )}
          {...props}
        />
        {label && <span className="text-xs text-label">{label}</span>}
      </label>
    );
  },
);
Checkbox.displayName = 'Checkbox';
