'use client';
import React from 'react';
import Link from 'next/link';
import type { ProductDetailData } from '@/types';
import { productDetailData } from '@/data/product/detail';
import { findProductDetailBySlug } from '@/lib/product/productdetail';
import { ErrorLink } from '@components/common/error';

import { Breadcrumb } from '@components/common/Breadcrumb';
import { ImageProduct } from './ImageProduct';
import { ProductSummary } from './ProductSummary';
import { ComboSetBox } from './ComboSet';
import { BoxInfoRight } from './BoxInfoRight';

interface ProductDetailPageProps {
  slug: string;
}

const ProductDetailPage: React.FC<ProductDetailPageProps> = ({ slug }) => {
  const productDetails = productDetailData as unknown as ProductDetailData[];
  const Products = findProductDetailBySlug(slug, productDetails);

  const breadcrumbItems = Products?.product_info?.productPath?.[0]?.path.map((item) => ({
    name: item.name,
    url: item.url,
  })) ?? [{ name: 'Trang chủ', url: '/' }];

  // Trường hợp không tìm thấy chi tiết sản phẩm
  // Không tìm thấy chi tiết sản phẩm
  if (!Products) {
    return <ErrorLink />;
  }

  return (
    <>
      <div className="container">
        <Breadcrumb items={breadcrumbItems} />
      </div>
      <section className="page-product-detail mt-2 bg-white">
        <div className="container">
          <div className="box-content-product-detail flex justify-between gap-5">
            <div className="box-left">
              {/* image product */}
              <ImageProduct ItemImage={Products.product_info.productImageGallery} />

              <ProductSummary ItemSummary={Products.product_info.productSummary} />

              <ComboSetBox combo_set={Products.combo_set} />
            </div>
            <div className="box-right">
              <BoxInfoRight {...Products} />
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default ProductDetailPage;