import { Button } from '@/components/ui/button';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import AppLayout from '@/layouts/app-layout';
import dashboard from '@/routes/dashboard';
import { Head, Link } from '@inertiajs/react';
import { Pencil, Trash2 } from 'lucide-react';

export default function Faq({
    faq,
}: {
    faq: [{ question: string; answer: string }];
}) {
    return (
        <AppLayout
            breadcrumbs={[
                { title: 'FAQs', href: dashboard.product.index().url },
            ]}
        >
            <Head title="FAQs" />

            <section className="flex flex-col gap-8 px-8 py-8">
                <div className="flex items-center justify-between">
                    <h1 className="text-xl font-semibold tracking-tight">
                        FAQs
                    </h1>
                    <Link href={dashboard.faq.add()}>
                        <Button className="cursor-pointer">
                            Add Questions
                        </Button>
                    </Link>
                </div>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead className="w-[80px]">S.N.</TableHead>
                            <TableHead>Question</TableHead>
                            <TableHead>Answer</TableHead>
                            <TableHead className="text-right">Action</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {faq.map((item, index) => (
                            <TableRow key={index}>
                                <TableCell className="font-medium">
                                    {index + 1}
                                </TableCell>
                                <TableCell>{item.question}</TableCell>
                                <TableCell>{item.answer}</TableCell>
                                <TableCell className="text-right">
                                    <div className="flex items-center justify-end gap-2">
                                        <Link href="">
                                            <Pencil size={18} />
                                        </Link>
                                        <Link href="">
                                            <Trash2
                                                size={18}
                                                color={'#D2042D'}
                                            />
                                        </Link>
                                    </div>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </section>
        </AppLayout>
    );
}
