import { getProducts } from "@/lib/woocommerce";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";

export const dynamic = 'force-dynamic';

// Disable static generation - this page will be server-rendered
export const generateStaticParams = undefined;

export default async function ProductPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  let product = null;
  
  try {
    const products = await getProducts();
    product = products.find((p) => (p.slug || p.id.toString()) === slug);
  } catch (e) {
    // Fallback
  }

  if (!product) {
    return (
      <main className="min-h-screen">
        <Header />
        <div className="pt-24 text-center">
          <h1 className="text-2xl">Product not found</h1>
        </div>
        <Footer />
      </main>
    );
  }

  const image = product.images?.[0]?.src || '/placeholder.jpg';
  const price = product.sale_price || product.price;

  return (
    <main className="min-h-screen">
      <Header />
      
      <section className="pt-24 pb-20 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            <div className="relative aspect-[4/5] bg-background-ice overflow-hidden">
              <img 
                src={image} 
                alt={product.name}
                className="object-cover w-full h-full"
              />
            </div>

            <div className="flex flex-col">
              <h1 className="text-4xl font-serif mb-4">{product.name}</h1>
              
              <div className="text-2xl mb-6">{price} RSD</div>
              
              <div className="prose max-w-none mb-8" dangerouslySetInnerHTML={{ __html: product.description || '' }} />
              
              <button 
                className="inline-block bg-foreground text-white px-8 py-4 text-lg font-medium text-center hover:bg-opacity-90 transition-all"
              >
                Add to Cart
              </button>
            </div>
          </div>
        </div>
      </section>
      
      <Footer />
    </main>
  );
}