import { IProductResponse } from "@/app/types/product.types"
import Navbar from "@/components/Navbar"
import ProductDetailsImageSliderSection from "@/components/product-details/ProductDetailsImageSliderSection"
import ProductDetailsInfoSection from "@/components/product-details/ProductDetailsInfoSection"
import ProductDetailsTab from "@/components/product-details/ProductDetailsTab"
import RelatedProduct from "@/components/product-details/RelatedProduct"

interface ProductResponse {
  data: IProductResponse
}

async function getProductBySlug(slug: string): Promise<ProductResponse> {
  try {
    const response = await fetch(
      `http://localhost:8000/api/v1/products/slug/${slug}`,
      {
        cache: "no-store",
      }
    )
    return response.json()
  } catch (error) {
    throw new Error(error instanceof Error ? error.message : String(error))
  }
}

interface PageProps {
  params: { slug: string }
  searchParams?: { [key: string]: string | string[] | undefined }
}

const Page = async ({ params }: PageProps) => {
  const { slug } = params
  const response = await getProductBySlug(slug)
  const { data: product } = response || {}

  if (!product) {
    return <div>Product not found</div>
  }

  return (
    <div className="w-full">
      <Navbar />
      <ProductDetailsImageSliderSection product={product} />
      <ProductDetailsInfoSection product={product} />
      <ProductDetailsTab slug={slug} product={product} />
      <RelatedProduct product={product} />
    </div>
  )
}

export default Page

This is my code, and when I try to build it, I get this error. I am using Next.js 15 with the app router

Some one help me