import { notFound } from 'next/navigation'
import { ProductDetail } from "@/components/product-detail"
import { SAMPLE_PRODUCTS } from "@/lib/sample-products"
import { draftMode } from 'next/headers'

async function getProduct(id: string, isDraft: boolean) {
  // In a real application, you would fetch the product from an API or database
  // For this example, we'll use the SAMPLE_PRODUCTS
  const product = SAMPLE_PRODUCTS.find(p => p.id === parseInt(id))

  if (!product) {
    return null
  }

  if (isDraft) {
    // Simulate draft data
    return {
      ...product,
      title: `[Draft] ${product.title}`,
      price: product.price * 0.9, // 10% discount in draft mode
    }
  }

  return product
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  const draftModeData = draftMode()
  const isDraftMode = draftModeData ? draftModeData.isEnabled : false
  const product = await getProduct(params.id, isDraftMode)

  if (!product) {
    notFound()
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <ProductDetail product={product} />
      {isDraftMode && (
        <div className="fixed bottom-0 left-0 w-full bg-yellow-400 text-black p-2 text-center">
          Preview Mode Enabled - {' '}
          <a className="underline" href={`/api/disable-preview?id=${params.id}`}>
            Exit Preview Mode
          </a>
        </div>
      )}
    </div>
  )
}