import { Head } from '@inertiajs/react';

import { AppearanceTabs } from '@/common/AppearanceTabs';
import { HeadingSmall } from '@/common/HeadingSmall';
import { type BreadcrumbItem } from '@/common/types';
import AppLayout from '@/pages/layouts/AppLayout';
import SettingsLayout from '@/pages/layouts/settings/layout';
import { appearance } from '@/routes';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Appearance settings',
        href: appearance().url,
    },
];

export default function AppearancePage() {
    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Appearance settings" />

            <SettingsLayout>
                <div className="space-y-6">
                    <HeadingSmall title="Appearance settings" description="Update your account's appearance settings" />
                    <AppearanceTabs />
                </div>
            </SettingsLayout>
        </AppLayout>
    );
}
