'use client'

interface BilingualFieldProps {
  label: string
  valueDe: string
  valueEn: string
  onChangeDe: (v: string) => void
  onChangeEn: (v: string) => void
  multiline?: boolean
  placeholder?: string
}

export default function BilingualField({
  label, valueDe, valueEn, onChangeDe, onChangeEn, multiline, placeholder,
}: BilingualFieldProps) {
  const inputClass = 'w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40 placeholder:text-white/20'

  return (
    <div>
      <label className="block text-xs font-medium text-white/60 uppercase tracking-wider mb-2">{label}</label>
      <div className="grid grid-cols-2 gap-3">
        <div>
          <div className="flex items-center gap-1.5 mb-1">
            <span className="text-[10px] text-white/40 font-semibold">DE</span>
          </div>
          {multiline ? (
            <textarea
              value={valueDe || ''}
              onChange={e => onChangeDe(e.target.value)}
              rows={3}
              placeholder={placeholder}
              className={`${inputClass} resize-none`}
            />
          ) : (
            <input
              type="text"
              value={valueDe || ''}
              onChange={e => onChangeDe(e.target.value)}
              placeholder={placeholder}
              className={inputClass}
            />
          )}
        </div>
        <div>
          <div className="flex items-center gap-1.5 mb-1">
            <span className="text-[10px] text-white/40 font-semibold">EN</span>
          </div>
          {multiline ? (
            <textarea
              value={valueEn || ''}
              onChange={e => onChangeEn(e.target.value)}
              rows={3}
              placeholder={placeholder}
              className={`${inputClass} resize-none`}
            />
          ) : (
            <input
              type="text"
              value={valueEn || ''}
              onChange={e => onChangeEn(e.target.value)}
              placeholder={placeholder}
              className={inputClass}
            />
          )}
        </div>
      </div>
    </div>
  )
}
