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

export function ProductList({product}: {product: allProducts}) {
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={`http://localhost:3000/uploads/inventory/${product.userId}/${product.id}/${product.urlImg}`}
          alt=""
        />

        <section className=''>
          <img
            className="border-2 object-cover w-[64px] h-[64px] md:w-[96px] md:h-[96px] aspect-square rounded-2xl"
            src={`http://localhost:3000/uploads/inventory/${product.userId}/${product.id}/${product.urlImg}`}
            alt=""
          />
        </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">
            {product.title.charAt(0).toUpperCase() + product.title.slice(1)}
          </CardTitle>
          <p className='font-semibold'>$ {product.price} </p>
          {product.status === 'AGOTADO' ? (
            <p className="font-semibold text-lg text-red-900">AGOTADO</p>
          ) : ('')}
        </CardHeader>
        <CardContent className="py-0 px-2 md:px-4 lg:px-6 flex-col justify-between flex-grow md:overflow-auto">
          <div>
            <p className='font-semibold text-lg border-t border-b'> Descripción</p>
            <p className='p-1'>{product.description}</p>
            {/* <p className='p-1'>{lorem+lorem+lorem+lorem}</p> */}
          </div>

          <div className='mt-2'>
            <p className='font-semibold text-lg border-t border-b'> Dirección</p>
            <p className='p-1'>{product.address}</p>
          </div>
        </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>
  );
}