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 Product({
    product,
}: {
    product: [{ title: string; type: string; image_url: string }];
}) {
    return (
        <AppLayout
            breadcrumbs={[
                { title: 'Products', href: dashboard.product.index().url },
            ]}
        >
            <Head title="Products" />

            <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">
                        Products
                    </h1>
                    <Link href={dashboard.product.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="w-24">Type</TableHead>
                            <TableHead className="text-right">Action</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {product.map((item, index) => (
                            <TableRow key={index}>
                                <TableCell className="font-medium">
                                    {index + 1}
                                </TableCell>
                                <TableCell>
                                    <img
                                        src={item.image_url}
                                        alt={item.title}
                                        className="aspect-video w-24 rounded-md object-cover object-center"
                                    />
                                </TableCell>
                                <TableCell>{item.title}</TableCell>
                                <TableCell>{item.type}</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>
    );
}
