// ─── Language system ──────────────────────────────────────────────────────────

const LANGS = [
  { id: 'en',     label: 'EN' },
  { id: 'fr',     label: 'FR' },
  { id: 'darija', label: 'DAR' },
];

const i18nBlank = ()           => ({ en: '', fr: '', darija: '' });
const i18nOf    = (v, lang)    => !v ? '' : typeof v === 'string' ? v : (v[lang] || '');
const i18nSet   = (obj, lang, val) => ({ ...i18nBlank(), ...(obj || {}), [lang]: val });

// ─── Components ───────────────────────────────────────────────────────────────

function LangTabs({ lang, onChange }) {
  return (
    <div className="tab-bar">
      {LANGS.map(l => (
        <button
          key={l.id}
          className={`tab${lang === l.id ? ' active' : ''}`}
          onClick={() => onChange(l.id)}
        >
          {l.label}
        </button>
      ))}
    </div>
  );
}

function I18nInput({ value, lang, onChange, ...rest }) {
  return (
    <input
      value={i18nOf(value, lang)}
      onChange={e => onChange(i18nSet(value, lang, e.target.value))}
      {...rest}
    />
  );
}

function I18nTextarea({ value, lang, onChange, ...rest }) {
  return (
    <textarea
      value={i18nOf(value, lang)}
      onChange={e => onChange(i18nSet(value, lang, e.target.value))}
      {...rest}
    />
  );
}