🔧 abc

import parse from "html-react-parser"
import BoxAddCardProduct from "./components/BoxAddCardProduct/BoxAddCardProduct"
import BoxAddCartBottom from "./components/BoxAddCardProduct/BoxAddCartBottom"
import ReviewsAndComment from "./components/CommentAndReview/CommentsAndReviews"
import "./components/styles.css"

import FooterLayout from "@/layouts/Footer"
import {
  type CustomerProductDetailResponse,
  type CustomerReviewStarResponse,
  api,
} from "@af/client/api/customer"
import { Col, Row } from "antd"
import BoxInfoProduct from "./components/BoxInfoProduct"
import ImagesProduct from "./components/ImageProduct/ImagesProduct"
import SameBrandItems from "./components/SameBrandItems/SameBrandItems"

interface Props {
  productId: string
}

const ProductDetailView = async ({ productId }: Props) => {
  let productData: CustomerProductDetailResponse | null
  let reviewStar: CustomerReviewStarResponse | null

  try {
    const data = await Promise.all([
      api.product.getProductByIdOrSlug({ idOrSlug: String(productId) }),
      api.product.getReviewStarByProductIdOrSlug({
        idOrSlug: String(productId),
      }),
    ])

    productData = data[0]
    reviewStar = data[1]
  } catch (error) {
    console.log(error)
    productData = null
    reviewStar = null
  }

  if (!productData || !reviewStar) {
    return (
      <div className="flex h-screen w-screen items-center justify-center">
        Can not load product data. Please try again later
      </div>
    )
  }

  return (
    <>
      <div className="w-full min-h-screen md:px-20 md:pt-12 bg-[#fff] px-4 pt-0 overflow-x-hidden ">
        <div className="md:px-[120px]">
          <Row gutter={80}>
            <Col className="gutter-row" xs={{ span: 24 }} md={{ span: 12 }}>
              <ImagesProduct productData={productData.product} />
              <div className="hidden md:block">
                <BoxInfoProduct reviewStar={reviewStar} />
              </div>
            </Col>
            <Col className="gutter-row" xs={{ span: 24 }} md={{ span: 12 }}>
              <BoxAddCardProduct
                productData={productData.product}
                reviewStar={reviewStar}
              />
              <div className="md:hidden">
                <BoxInfoProduct reviewStar={reviewStar} />
              </div>
            </Col>
          </Row>
        </div>

        <div className="md:w-[75%] m-auto py-4 md:py-12">
          {parse(productData?.product?.description ?? "")}
        </div>

        <div className="w-screen h-[40px] md:h-[80px] bg-[#F5F5F5] ml-[-16px] md:ml-[-80px]" />

        {reviewStar.records > 0 && (
          <>
            <ReviewsAndComment reviewStar={reviewStar} />
            <div className="w-screen h-[40px] md:h-[80px] bg-[#F5F5F5] ml-[-16px] md:ml-[-80px]" />
          </>
        )}

        <SameBrandItems collections={productData.collection} />
      </div>
      <div
        className={`${productData.product.isActive && "pb-[112px] md:pb-[84px]"}`}
      >
        <FooterLayout />
      </div>

      {productData.product.isActive && (
        <BoxAddCartBottom productData={productData.product} />
      )}
    </>
  )
}

export default ProductDetailView