src/components/question-creation/inputs/CheckboxInput.tsx

'use client';

import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';

export interface CheckboxInputProps {
  label: string;
  value?: boolean;
  defaultValue?: boolean;
  onChange: (value: boolean) => void;
  className?: string;
  disabled?: boolean;
  helpText?: string;
  required?: boolean;
  id?: string;
}

export default function CheckboxInput({
  label,
  value,
  defaultValue = false,
  onChange,
  className = '',
  disabled = false,
  helpText,
  required = false,
  id,
}: CheckboxInputProps) {
  const currentValue = value ?? defaultValue;
  const inputId = id || `checkbox-${Math.random().toString(36).substring(2, 11)}`;

  return (
    <div className={`flex items-start space-x-3 ${className}`}>
      <Checkbox
        id={inputId}
        checked={currentValue}
        onCheckedChange={onChange}
        disabled={disabled}
        required={required}
        className="mt-0.5"
      />
      <div className="grid gap-1.5 leading-none">
        <Label htmlFor={inputId} className="text-sm font-medium">
          {label}
          {required && <span className="text-destructive ml-1">*</span>}
        </Label>
        {helpText && (
          <p className="text-xs text-muted-foreground">
            {helpText}
          </p>
        )}
      </div>
    </div>
  );
}