import * as React from 'react';
import { cn } from '@/lib/utils';

/**
 * A minimal checkbox that uses a native <input type="checkbox">.
 * We don't pull in @radix-ui/react-checkbox because the only
 * place checkboxes appear in the admin UI is the Sources feature
 * (W2) and the dial was about not adding a dep for one screen.
 *
 * The component forwards a ref, supports the standard checked /
 * onChange contract that react-hook-form uses, and renders the
 * checked state with the project's primary color.
 */

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

export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
  ({ className, ...props }, ref) => {
    return (
      <input
        ref={ref}
        type="checkbox"
        className={cn(
          'h-4 w-4 shrink-0 rounded-sm border border-input bg-background',
          'cursor-pointer accent-primary',
          'disabled:cursor-not-allowed disabled:opacity-50',
          'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
          className,
        )}
        {...props}
      />
    );
  },
);
Checkbox.displayName = 'Checkbox';
