'use client';

import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@repo/shadcn/card';
import { useRouter } from 'next/navigation';
import { useAllProductQuery } from '@/feactures/inventory/hooks/use-query-products';
import { allProducts } from '../../schemas/inventory';
import { ImageIcon } from 'lucide-react';

export function ProductList() {
  const router = useRouter();
  const { data: produts } = useAllProductQuery();

  const handle = (id: number) => {
    router.push(`/dashboard/productos/${id}`);
  };

  return (
    <div className="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
      {produts?.meta.totalPages === 0 ? (
        <section className="col-span-full text-center py-10">
          <p className="text-muted-foreground">
            No hay productos disponibles en este momento.
          </p>
        </section>
      ) : (
        produts?.data.map((data: allProducts) => (
          <Card
            key={data.id}
            className="cursor-pointer flex flex-col"
            onClick={() => handle(Number(data.id))}
          >
            <CardHeader>
              <CardTitle className="text-base font-bold truncate">
                {data.title.charAt(0).toUpperCase() + data.title.slice(1)}
              </CardTitle>
            </CardHeader>
            <CardContent className="p-0 flex-grow">
              <img
                className="object-cover w-full h-full aspect-square border"
                src={`http://localhost:3000/${data.urlImg}`}
                alt=""
              />
            </CardContent>
            <CardFooter className="flex-col items-start p-4">
              {data.status === 'AGOTADO' ? (
              <p className="font-semibold text-lg text-red-900">AGOTADO</p>
              ): ('')}
              <p className="font-semibold text-lg">$ {data.price}</p>
            </CardFooter>
          </Card>
        ))
      )}
    </div>
  );
}