'use client';

import { Input } from '@/components/ui/input';
import type { FieldConfig } from '@/types/invyone-component';

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

export function NumberField({ field, value, onChange, mode, disabled, error }: NumberFieldProps) {
  if (mode === 'search') {
    // 검색: min~max 범위 입력 2개
    const min = value?.min ?? '';
    const max = value?.max ?? '';
    return (
      <div className="flex items-center gap-1">
        <Input
          type="number"
          value={min}
          onChange={(e) => onChange({ ...value, min: e.target.value === '' ? undefined : Number(e.target.value) })}
          placeholder="최소"
          disabled={disabled}
          className={`h-7 text-xs flex-1 ${error ? 'border-destructive' : ''}`}
        />
        <span className="text-xs text-[var(--v5-text-muted)]">~</span>
        <Input
          type="number"
          value={max}
          onChange={(e) => onChange({ ...value, max: e.target.value === '' ? undefined : Number(e.target.value) })}
          placeholder="최대"
          disabled={disabled}
          className={`h-7 text-xs flex-1 ${error ? 'border-destructive' : ''}`}
        />
      </div>
    );
  }

  return (
    <Input
      type="number"
      value={value ?? ''}
      onChange={(e) => onChange(e.target.value === '' ? null : Number(e.target.value))}
      placeholder={field.placeholder ?? field.label}
      disabled={disabled}
      className={`h-7 text-xs text-right ${error ? 'border-destructive' : ''}`}
    />
  );
}
