import Image from "next/image";
import React from "react";

const ProductDetailsPage = ({ data }) => {
  if (!data) return null; // Handle case where data is not yet available

  return (
   
          <h1>{data.brand}</h1>
        </div>
        <div className="w-auto h-[40rem] flex justify-center items-center relative">
          <Image
            src={data.images[0]}
            fill
            alt={data.title}
            className="p-10 rounded-sm"
          />
        </div>
        <div className="flex flex-col gap-3">
          <h1 className="flex justify-center items-center pt-4 pb-4 text-3xl font-bold">
            {data.title}
          </h1>
          <p>{data.short_description}</p>
          <h3 className="text-3xl">
            Current Price <span>{data.currentPrice}</span>
          </h3>
          <h3 className="text-3xl">
            Starting Price <span>{data.initialPrice}</span>
          </h3>
          <p>{data.ratings} Star</p>
          <p>{data.detail_description}</p>
        </div>
      </div>
    </section>
  );
};

ProductDetailsPage.displayName = "ProductDetailsPage";

export default ProductDetailsPage;