import { Head, usePage } from '@inertiajs/react';
import { PageHeaderActions } from '@/components/page-header-actions';
import { OpenAiSettingsForm } from '@/features/integrations/forms/openai-settings-form';
import type { OpenAiSettingsPageProps } from '@/features/integrations/types';
import { useI18n } from '@/hooks/use-i18n';

export default function OpenAiSettingsPage() {
    const { t } = useI18n();
    const { openai } = usePage<OpenAiSettingsPageProps>().props;

    return (
        <>
            <Head title={t('settings.openai.page.head_title')} />

            <section className="space-y-6">
                <PageHeaderActions
                    title={t('settings.openai.page.title')}
                    description={t('settings.openai.page.description')}
                />

                <div className="mx-auto w-full max-w-3xl">
                    <OpenAiSettingsForm state={openai} />
                </div>
            </section>
        </>
    );
}
