'use client';

import { Checkbox } from '@/components/ui/checkbox';
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from '@/components/ui/select';
import type { FieldConfig } from '@/types/invyone-component';

interface CheckboxFieldProps {
  field: FieldConfig;
  value: any;
  onChange: (value: any) => void;
  mode: 'form' | 'search';
  disabled?: boolean;
  error?: string;
}

export function CheckboxField({ field, value, onChange, mode, disabled, error }: CheckboxFieldProps) {
  if (mode === 'search') {
    // 검색: Select (전체/✓/✗)
    return (
      <Select
        value={value === true ? 'true' : value === false ? 'false' : ''}
        onValueChange={(v) => {
          if (v === 'true') onChange(true);
          else if (v === 'false') onChange(false);
          else onChange(undefined);
        }}
        disabled={disabled}
      >
        <SelectTrigger className={`h-7 text-xs ${error ? 'border-destructive' : ''}`}>
          <SelectValue placeholder="전체" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all" className="text-xs">전체</SelectItem>
          <SelectItem value="true" className="text-xs">✓</SelectItem>
          <SelectItem value="false" className="text-xs">✗</SelectItem>
        </SelectContent>
      </Select>
    );
  }

  // 폼: 체크박스
  const checked = value === true || value === 'true' || value === 't';
  return (
    <div className="flex items-center gap-2 h-7">
      <Checkbox
        checked={checked}
        onCheckedChange={(c) => onChange(c === true)}
        disabled={disabled}
      />
      <span className="text-xs text-[var(--v5-text-sec)]">{field.label}</span>
    </div>
  );
}
