// 'use client';

// import PageContainer from '@/components/layout/page-container';
import { getProductById } from '@/feactures/inventory/actions/actions';
// import { SurveyResponse } from '@/feactures/surveys/components/survey-response';
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@repo/shadcn/card';
import {ProductList} from '@/feactures/inventory/components/products/see-product'

export default async function SurveyResponsePage({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params; // You can still destructure id from params

  if (!id || id === '') {
    // Handle the case where no id is provided
    return null;
  }

  // Call the function passing the dynamic id
  const data = await getProductById(Number(id));

  if (!data?.data) {
    return <div>Encuesta no encontrada</div>;
  }

  const product = data.data

  // const lorem = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore placeat est corporis minus exercitationem impedit ab architecto dolorum nihil nam facilis suscipit porro, iure et quidem illo mollitia officia amet?"

  // console.log(data.data);

  return (
    <ProductList product={product} />
    // <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.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.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>
  );
}