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

export default function Carousel({
    carousel,
}: {
    carousel: [{ alt: string; image_url: string }];
}) {
    return (
        <>
            <AppLayout
                breadcrumbs={[
                    { title: 'Carousel', href: dashboardcarousel.index().url },
                ]}
            >
                <Head title="Carousel"></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">
                            Carousel
                        </h1>
                        <Link href={dashboardcarousel.add()}>
                            <Button className="cursor-pointer">
                                Add Image
                            </Button>
                        </Link>
                    </div>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead className="w-[80px]">S.N.</TableHead>
                                <TableHead className="w-48">Image</TableHead>
                                <TableHead>Title</TableHead>
                                <TableHead className="text-right">
                                    Action
                                </TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {carousel.map((item, index) => (
                                <TableRow key={index}>
                                    <TableCell className="font-medium">
                                        {index + 1}
                                    </TableCell>
                                    <TableCell>
                                        <img
                                            src={item.image_url}
                                            alt={item.alt}
                                            className="aspect-video w-24 rounded-md object-cover object-center"
                                        />
                                    </TableCell>
                                    <TableCell>{item.alt}</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>
        </>
    );
}
