sam-react-prod/src/components/items/DynamicItemForm/fields/CheckboxField.tsx

/**
 * CheckboxField Component
 *
 * 체크박스/스위치 필드 (checkbox, switch)
 */

'use client';

import { Checkbox } from '@/components/ui/checkbox';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import type { DynamicFieldProps } from '../types';
import { cn } from '@/lib/utils';

export function CheckboxField({
  field,
  value,
  error,
  onChange,
  onBlur,
  disabled,
}: DynamicFieldProps) {
  const isSwitch = field.field_type === 'switch';
  const checked = value === true || value === 'true' || value === 1;

  const handleChange = (newChecked: boolean) => {
    onChange(newChecked);
    onBlur();
  };

  if (isSwitch) {
    return (
      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <Label
            htmlFor={field.field_key}
            className={cn(
              'text-sm font-medium',
              field.is_required && "after:content-['*'] after:ml-0.5 after:text-red-500"
            )}
          >
            {field.field_name}
          </Label>
          <Switch
            id={field.field_key}
            checked={checked}
            onCheckedChange={handleChange}
            disabled={disabled || field.is_readonly}
          />
        </div>

        {field.help_text && !error && (
          <p className="text-xs text-muted-foreground">{field.help_text}</p>
        )}

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

  return (
    <div className="space-y-2">
      <div className="flex items-center space-x-2">
        <Checkbox
          id={field.field_key}
          checked={checked}
          onCheckedChange={handleChange}
          disabled={disabled || field.is_readonly}
        />
        <Label
          htmlFor={field.field_key}
          className={cn(
            'text-sm font-medium cursor-pointer',
            field.is_required && "after:content-['*'] after:ml-0.5 after:text-red-500",
            (disabled || field.is_readonly) && 'cursor-not-allowed opacity-50'
          )}
        >
          {field.field_name}
        </Label>
      </div>

      {field.help_text && !error && (
        <p className="text-xs text-muted-foreground ml-6">{field.help_text}</p>
      )}

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

export default CheckboxField;