'use client'

export type BilingualField = { fr: string; ar: string }

export function emptyBilingual(): BilingualField {
  return { fr: '', ar: '' }
}

export function bilingualPrimary(field: BilingualField): string {
  return field.fr || field.ar
}

export function BilingualInput({
  label,
  value,
  onChange,
  required = false,
  maxLength,
}: {
  label: string
  value: BilingualField
  onChange: (value: BilingualField) => void
  required?: boolean
  maxLength?: number
}) {
  return (
    <div>
      <span className="mb-1.5 block text-sm font-medium text-slate-700">
        {label}
        {required ? <span className="ml-1 text-red-600">*</span> : null}
      </span>
      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
        <div className="relative">
          <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 rounded bg-blue-50 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-blue-500">
            FR
          </span>
          <input
            type="text"
            dir="ltr"
            lang="fr"
            maxLength={maxLength}
            placeholder="Français…"
            value={value.fr}
            onChange={(e) => onChange({ ...value, fr: e.target.value })}
            className="input-field pl-11"
          />
        </div>
        <div className="relative">
          <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rounded bg-emerald-50 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-emerald-600">
            AR
          </span>
          <input
            type="text"
            dir="rtl"
            lang="ar"
            maxLength={maxLength}
            placeholder="بالعربية…"
            value={value.ar}
            onChange={(e) => onChange({ ...value, ar: e.target.value })}
            className="input-field pr-11 text-right"
          />
        </div>
      </div>
    </div>
  )
}
