import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from '@/components/ui/accordion';
import { Button } from '@/components/ui/button';
import Layout from '@/layouts/client/layout';
import { contact } from '@/routes';
import img1 from '@asset/img/Bespoke/bes 5.jpg';
import img4 from '@asset/img/Bespoke/Ree 6.jpg';
import img3 from '@asset/img/Bespoke/Shrek.jpg';
import img2 from '@asset/img/Bespoke/Swarovsky embedded wall hang.jpg';
import { Head, Link } from '@inertiajs/react';

export default function Faq({
    faq,
}: {
    faq: [{ id: number; question: string; answer: string }];
}) {
    return (
        <>
            <Layout>
                <Head title="FAQs" />
                <section className="mx-auto grid max-w-screen-2xl grid-cols-12 gap-32 px-12 py-8 max-sm:grid-cols-1 max-sm:gap-8 max-sm:px-8">
                    <div className="col-span-4 flex flex-col items-start gap-4">
                        <div>
                            <h1 className="font-serif text-4xl font-medium tracking-tight">
                                Frequently Asked Questions
                            </h1>
                            <p>Any question, answered right here</p>
                        </div>
                        <Link href={contact()}>
                            <Button
                                className="cursor-pointer border border-primary font-serif ring-primary"
                                variant={'outline'}
                            >
                                Contact Now
                            </Button>
                        </Link>

                        <div className="mt-8 grid grid-cols-2 gap-2 max-sm:mt-2 max-sm:hidden">
                            <div className="flex flex-col gap-2">
                                <img
                                    src={img1}
                                    alt="Image 1"
                                    className="rounded-lg"
                                />
                                <img
                                    src={img4}
                                    alt="Image 4"
                                    className="rounded-lg"
                                />
                            </div>
                            <div className="mt-8 flex flex-col gap-2">
                                <img
                                    src={img2}
                                    alt="Image 2"
                                    className="rounded-lg"
                                />
                                <img
                                    src={img3}
                                    alt="Image 3"
                                    className="rounded-lg"
                                />
                            </div>
                        </div>
                    </div>
                    <div className="col-span-8 w-full">
                        <Accordion
                            type="single"
                            collapsible
                            className="w-full"
                            defaultValue="1"
                        >
                            {faq.map((item) => (
                                <AccordionItem value={`${item.id}`}>
                                    <AccordionTrigger className="w-full">
                                        {item?.question}
                                    </AccordionTrigger>
                                    <AccordionContent className="px-2 text-gray-600">
                                        {item?.answer}
                                    </AccordionContent>
                                </AccordionItem>
                            ))}
                        </Accordion>
                    </div>
                </section>
            </Layout>
        </>
    );
}
