import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import Layout from '@/layouts/client/layout';
import { Head } from '@inertiajs/react';

export default function Product() {
    return (
        <>
            <Layout>
                <Head title="Our Products" />
                <section className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-12 py-8">
                    <h1 className="font-serif text-5xl font-medium tracking-tight">
                        Our Exquisite Collections
                    </h1>
                    <Tabs defaultValue="account" className="w-[400px]">
                        <TabsList>
                            <TabsTrigger value="account">Account</TabsTrigger>
                            <TabsTrigger value="password">Password</TabsTrigger>
                        </TabsList>
                        <TabsContent value="account">
                            Make changes to your account here.
                        </TabsContent>
                        <TabsContent value="password">
                            Change your password here.
                        </TabsContent>
                    </Tabs>
                </section>
            </Layout>
        </>
    );
}
