/**
 * Boolean Field Component
 *
 * Renders a checkbox for boolean configuration options.
 */

import { memo } from 'react';
import { Label } from '../ui/label';
import { Checkbox } from '../ui/checkbox';
import { ActionField } from '../../types/action';

interface BooleanFieldProps {
  fieldName: string;
  field: ActionField;
  value: boolean;
  onChange: (value: boolean) => void;
  error?: string;
}

export const BooleanField = memo(function BooleanField({
  fieldName,
  field,
  value,
  onChange,
  error,
}: BooleanFieldProps) {
  return (
    <div className="space-y-2">
      <Label className="text-slate-900">
        {field.label}
        {field.required && <span className="text-red-600 ml-1">*</span>}
      </Label>

      <div className="flex items-center space-x-2">
        <Checkbox
          id={fieldName}
          checked={Boolean(value)}
          onCheckedChange={(checked) => onChange(Boolean(checked))}
          className="border-slate-400 data-[state=checked]:bg-cyan-600 data-[state=checked]:border-cyan-600"
        />
        <label htmlFor={fieldName} className="text-sm text-slate-500 cursor-pointer">
          {field.description}
        </label>
      </div>

      {error && <p className="text-xs text-red-600">{error}</p>}
    </div>
  );
});