'use client';
import { useState } from "react";
import { allProducts } from "../../schemas/inventory";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@repo/shadcn/card';

export function ProductList({ product }: { product: allProducts }) {
  const [selectedImg, setSelectedImg] = useState(`/uploads/inventory/${product.userId}/${product.id}/${product.urlImg}`)
  console.log(product);

  return (
    // <PageContainer>
    <main className='px-4 lg:px-6 flex flex-col md:flex-row gap-3 lg:gap-4 md:relative'>
      <div className='w-full flex justify-between flex-col'>

        <img
          className="border-2 object-contain w-full f-full min-h-[400px] md:h-[70vh] aspect-square rounded-2xl"
          src={selectedImg}
          alt=""
        />

        <section className="relative flex flex-row flex-nowrap overflow-auto gap-1 md:gap-2 p-2">
          {/* <span className="sticky left-0 flex items-center">
            <span className="text-xl p-3 cursor-pointer bg-neutral-800/50 rounded-full text-white">
              {"<"}
            </span>
          </span> */}
          {product.gallery?.map((img, index) => (
            <img
              key={index}
              className="cursor-pointer border-2 object-cover w-[64px] h-[64px] md:w-[96px] md:h-[96px] aspect-square rounded-2xl"
              src={`/uploads/inventory/${product.userId}/${product.id}/${img}`}
              alt=""
              onClick={() => setSelectedImg(`/uploads/inventory/${product.userId}/${product.id}/${img}`)}
            />
          ))}
          {/* <div className="sticky right-0 flex items-center">
            <span className="text-xl p-3 cursor-pointer bg-neutral-800/50 rounded-full text-white">
              {">"}
            </span>
          </div> */}
        </section>


      </div>
      <Card className="flex flex-col md:w-[400px] lg:w-[500px] min-h-[400px] md:h-[85vh] md:overflow-auto md:sticky top-0 right-0">
        <CardHeader className='py-2 px-2 md:px-4 lg:px-6'>
          <CardTitle className="font-bold text-2xl text-primary">
            {product.title.charAt(0).toUpperCase() + product.title.slice(1)}
          </CardTitle>
          <p className='font-semibold'>{product.price} Bs.
            {product.status === 'AGOTADO' ? (
              <span className="font-semibold text-lg text-red-900"> AGOTADO</span>
            ) : ('')}
          </p>
        </CardHeader>
        <CardContent className="py-0 px-2 h-full flex flex-col justify-around flex-grow md:px-4 md:overflow-auto lg:px-6">
          <section>
            <p className='font-semibold text-lg border-t border-b'>• Descripción</p>
            <p className='p-1'>{product.description}</p>
          </section>

          <section>
            <p className='font-semibold text-lg border-t border-b'>• Dirección</p>
            <p className='p-1'>{product.address}</p>
          </section>
        </CardContent>

        <CardFooter className="px-2 md:px-4 lg:px-6">
          <div>
            <p className='font-semibold text-lg border-t border-b mt-4'>• Información del vendedor</p>
            <p>{product.fullname}</p>
            <p>{product.phone}</p>
            <p>{product.email}</p>
          </div>
        </CardFooter>
      </Card>
    </main>
  );
}