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

export default function Product({
    product,
}: {
    product: [{ title: string; type: string; image_url: string }];
}) {
    const { t } = useTranslations();
    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">
                        {t('pages.product.sections.first.title')}
                    </h1>
                    <Tabs
                        defaultValue="traditional"
                        className="flex flex-col gap-8"
                    >
                        <TabsList className="flex items-center gap-4 bg-transparent">
                            <TabsTrigger
                                value="traditional"
                                className="!h-auto cursor-pointer px-4 py-2 data-[state=active]:bg-primary data-[state=active]:text-white"
                            >
                                {t('pages.product.sections.first.tab1')}
                            </TabsTrigger>
                            <TabsTrigger
                                value="modern"
                                className="!h-auto cursor-pointer px-4 py-2 data-[state=active]:bg-primary data-[state=active]:text-white"
                            >
                                {t('pages.product.sections.first.tab2')}
                            </TabsTrigger>
                            <TabsTrigger
                                value="abstract"
                                className="!h-auto cursor-pointer px-4 py-2 data-[state=active]:bg-primary data-[state=active]:text-white"
                            >
                                {t('pages.product.sections.first.tab3')}
                            </TabsTrigger>
                        </TabsList>
                        <TabsContent value="traditional">
                            <div className="grid grid-cols-4 gap-6 max-md:grid-cols-3 max-sm:grid-cols-2 max-sm:gap-4">
                                {product.map((e, index) =>
                                    e.type === 'traditional' ? (
                                        <img
                                            key={index}
                                            src={e.image_url}
                                            alt={e.title}
                                            className="aspect-video rounded-md object-cover object-center"
                                        />
                                    ) : null,
                                )}
                            </div>
                        </TabsContent>
                        <TabsContent value="modern">
                            <div className="grid grid-cols-4 gap-6 max-md:grid-cols-3 max-sm:grid-cols-2 max-sm:gap-4">
                                {product.map((e, index) =>
                                    e.type === 'modern' ? (
                                        <img
                                            key={index}
                                            src={e.image_url}
                                            alt={e.title}
                                            className="aspect-video rounded-md object-cover object-center"
                                        />
                                    ) : null,
                                )}
                            </div>
                        </TabsContent>
                        <TabsContent value="abstract">
                            <div className="grid grid-cols-4 gap-6 max-md:grid-cols-3 max-sm:grid-cols-2 max-sm:gap-4">
                                {product.map((e, index) =>
                                    e.type === 'abstract' ? (
                                        <img
                                            key={index}
                                            src={e.image_url}
                                            alt={e.title}
                                            className="aspect-video rounded-md object-cover object-center"
                                        />
                                    ) : null,
                                )}
                            </div>
                        </TabsContent>
                    </Tabs>
                </section>

                <section className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-12 py-8 max-md:px-8">
                    <div className="flex flex-col gap-2">
                        <h2 className="font-serif text-3xl font-medium tracking-tight">
                            {t('pages.product.sections.second.title')}
                        </h2>
                        <p className="text-gray-500">
                            {t('pages.product.sections.second.desc')}
                        </p>
                    </div>
                    <div className="grid grid-cols-4 gap-6 max-md:grid-cols-3 max-sm:grid-cols-2 max-sm:gap-4">
                        {product.map((e, index) =>
                            e.type === 'art' ? (
                                <img
                                    key={index}
                                    src={e.image_url}
                                    alt={e.title}
                                    className="aspect-video rounded-md object-cover object-center"
                                />
                            ) : null,
                        )}
                    </div>
                </section>
            </Layout>
        </>
    );
}
