/**
 * 체크박스 필드 컴포넌트
 * 기존 ItemForm과 100% 동일한 디자인
 */

'use client';

import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';
import type { DynamicFieldRendererProps } from '../types';

export function CheckboxField({
  field,
  value,
  onChange,
  error,
  disabled,
}: DynamicFieldRendererProps) {
  const fieldKey = field.field_key || `field_${field.id}`;
  const boolValue = value === true || value === 'true' || value === 1;

  return (
    <div>
      <div className="flex items-center space-x-2">
        <Checkbox
          id={fieldKey}
          checked={boolValue}
          onCheckedChange={(checked) => onChange(checked as boolean)}
          disabled={disabled}
        />
        <Label htmlFor={fieldKey} className="cursor-pointer">
          {field.field_name}
          {field.is_required && <span className="text-red-500"> *</span>}
        </Label>
      </div>
      {error && (
        <p className="text-xs text-red-500 mt-1 ml-6">{error}</p>
      )}
      {!error && field.description && (
        <p className="text-xs text-muted-foreground mt-1 ml-6">
          * {field.description}
        </p>
      )}
    </div>
  );
}
