import React from "react";
import { useProduct } from "@/context/helpers/product";
import { ProductSEO } from "@/features/product/ProductSEO";
import { ProductLoadingSkeleton } from "@/features/product/ProductLoadingSkeleton";
import ProductDetails from "../components/product/ProductDetails";
import ProductTabs from "../components/product/ProductTabs";
import RelatedProducts from "../components/product/RelatedProducts";
import Features from "@/features/home/hero/Features";

export default function ProductPage() {
  const { product, isLoading } = useProduct();

  if (isLoading) {
    return <ProductLoadingSkeleton />;
  }

  return (
    <>
      <ProductSEO product={product} />

      <main className="container max-w-[1400px] mx-auto px-4 py-8">
        {/* Product Details Section */}
        <ProductDetails product={product} />

        {/* Product Tabs Section (Reviews, Description, FAQs) */}
        <ProductTabs product={product} />

        <Features />

        {/* Related Products Section */}
        <RelatedProducts relatedProducts={product?.relatedProductList} />
      </main>
    </>
  );
}