'use client';
import { NativeSelect } from '@fayegram-ai/faye-ui/controls/native-select';
import { useState } from 'react';
import { FayeUIProvider } from '@fayegram-ai/faye-ui/provider/provider';
import { englishCatalog } from '@fayegram-ai/faye-ui/provider/locale-en';
import { traditionalChineseCatalog } from '@fayegram-ai/faye-ui/provider/locale-zh-hant';
import { simplifiedChineseCatalog } from '@fayegram-ai/faye-ui/provider/locale-zh-hans';
import { koreanCatalog } from '@fayegram-ai/faye-ui/provider/locale-ko';
import { japaneseCatalog } from '@fayegram-ai/faye-ui/provider/locale-ja';
import { Modal } from '@fayegram-ai/faye-ui/overlays/modal';
import { Chip } from '@fayegram-ai/faye-ui/controls/chip';
import { Pagination } from '@fayegram-ai/faye-ui/navigation/pagination';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
const catalogs = [englishCatalog, traditionalChineseCatalog, simplifiedChineseCatalog, koreanCatalog, japaneseCatalog];
export default function Localization() {
    const [locale, setLocale] = useState('en'), [open, setOpen] = useState(false), [page, setPage] = useState(1), [removed, setRemoved] = useState(false);
    return <section aria-label="Locale catalog example">
        <label>Catalog<NativeSelect aria-label="Example locale" value={locale} onChange={e => setLocale(e.target.value)}><option value="en">English</option><option value="zh-Hant">繁體中文</option><option value="zh-Hans">简体中文</option><option value="ko">한국어</option><option value="ja">日本語</option></NativeSelect></label>
        <FayeUIProvider locale={locale} catalogs={catalogs} applyToDocument={false} direction="ltr">
            <Button onClick={() => setOpen(true)}>Open localized dialog</Button>
            <Modal open={open} onOpenChange={setOpen} title="Application-provided title">The close label comes from the selected catalog. Application content is supplied separately.</Modal>
            {!removed && <Chip onRemove={() => setRemoved(true)}>Application-provided item</Chip>}
            <Pagination page={page} count={5} onPageChange={setPage}/>
            <output>Page {page}{removed ? ' · Item removed' : ''}</output>
        </FayeUIProvider>
    </section>;
}