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

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Products',
        href: product.index().url,
    },
];

export default function index({
    products,
}: {
    products: [{ id: number; name: string; display_status: string }];
}) {
    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Products" />

            <div className="flex flex-col gap-8 px-12 py-8">
                <div className="flex w-full items-center justify-between">
                    <h1 className="font-bold">Products</h1>
                    <Link href={product.add()}>
                        <Button className="cursor-pointer">
                            <PackagePlus /> Add Product
                        </Button>
                    </Link>
                </div>
                <Table>
                    {/* <TableCaption>A list of your recent invoices.</TableCaption> */}
                    <TableHeader>
                        <TableRow className="w-full">
                            <TableHead className="!w-24">S.N.</TableHead>
                            <TableHead>Name</TableHead>
                            <TableHead>Status</TableHead>
                            <TableHead className="text-right">Action</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {products.map((prod, index) => (
                            <TableRow key={index}>
                                <TableCell className="font-medium">
                                    {index + 1}
                                </TableCell>
                                <TableCell>{prod.name}</TableCell>
                                <TableCell>{prod.display_status}</TableCell>
                                <TableCell className="flex items-end justify-end gap-1 text-right">
                                    <Button
                                        variant={'ghost'}
                                        className="cursor-pointer"
                                    >
                                        <Pencil />
                                    </Button>
                                    <Button
                                        className="cursor-pointer bg-red-800 hover:bg-red-900"
                                        onClick={() => {
                                            router.delete(
                                                product.delete(prod.id).url,
                                            );
                                        }}
                                    >
                                        <Trash2 />
                                    </Button>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
        </AppLayout>
    );
}
