Translation and Languages

import { Lookup, Select } from '@cleen/cleen-components';
import { useLanguages, useUserLanguage } from '@/hooks/useLanguages';

export function LanguagePicker() {
  const { languages, loading } = useLanguages();
  const { current, setCurrent } = useUserLanguage();

  return (
    <div className="lang-picker">
      <label htmlFor="lang">Display language</label>
      <Select
        id="lang"
        loading={loading}
        value={current}
        onChange={setCurrent}
        options={languages.map((l) => ({ value: l.code, label: `${l.name} (${l.nativeName})` }))}
      />
      <Lookup
        placeholder="Or search 130+ languages…"
        searchKeys={['name', 'nativeName', 'code']}
        items={languages}
      />
    </div>
  );
}