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

export default function Testimonial({
    testimonial,
}: {
    testimonial: [
        { name: string; description: string; location: string; image: string },
    ];
}) {
    return (
        <>
            <AppLayout
                breadcrumbs={[{ title: 'Testimonial', href: index().url }]}
            >
                <Head title={'Testimonials'}></Head>
                <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">
                            Testimonial
                        </h1>
                    </div>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead className="w-[80px]">S.N.</TableHead>
                                <TableHead className="w-48">Image</TableHead>
                                <TableHead>Name</TableHead>
                                <TableHead>Location</TableHead>
                                <TableHead>Description</TableHead>
                                <TableHead className="text-right">
                                    Action
                                </TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {testimonial.map((item, index) => (
                                <TableRow key={index}>
                                    <TableCell className="font-medium">
                                        {index + 1}
                                    </TableCell>
                                    <TableCell>
                                        <img
                                            src={item.image}
                                            alt={item.name}
                                            className="aspect-video w-24 rounded-md object-cover object-center"
                                        />
                                    </TableCell>
                                    <TableCell>{item.name}</TableCell>
                                    <TableCell>{item.location}</TableCell>
                                    <TableCell>{item.description}</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>
        </>
    );
}
