'use client';

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

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

export function CodeField({ field, value, onChange, mode, disabled, error }: CodeFieldProps) {
  if (mode === 'search') {
    // 검색: 완전 일치 텍스트 입력
    return (
      <Input
        type="text"
        value={value ?? ''}
        onChange={(e) => onChange(e.target.value || undefined)}
        placeholder={field.placeholder ?? field.label}
        disabled={disabled}
        className={`h-7 text-xs ${error ? 'border-destructive' : ''}`}
      />
    );
  }

  // 폼: readonly 표시 (자동채번)
  return (
    <div className="flex items-center gap-1">
      <Input
        type="text"
        value={value ?? ''}
        readOnly
        disabled
        placeholder="자동채번"
        className="h-7 text-xs flex-1 bg-[var(--v5-bg-subtle)] text-[var(--v5-text-muted)]"
      />
      <Lock className="h-3 w-3 shrink-0 text-[var(--v5-text-muted)]" />
    </div>
  );
}
