"use client";

import { useParams } from 'next/navigation';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
import { Star } from 'lucide-react';

export default function PropertyDetailPage() {
  const { id } = useParams();

  const propertyData: Record<string, any> = {
    "p1": {
        name: "Bel Air Estate",        price: "$12,500,000",        description: "A sprawling architectural masterpiece in the heart of Bel Air. Features include a private vineyard, Olympic-sized pool, and panoramic canyon views.",        images: [{ src: "http://img.b2bpic.net/free-photo/real-estate-agents-working-building-s-main-entrance_23-2147650201.jpg", alt: "Bel Air Estate Exterior" }]
    },
    "p2": {
        name: "Azure Coast Villa",        price: "$8,900,000",        description: "Perched on the cliffs of the French Riviera, this villa offers direct access to the Mediterranean and unparalleled privacy.",        images: [{ src: "http://img.b2bpic.net/free-photo/bed-beach_1203-305.jpg", alt: "Azure Coast Villa View" }]
    },
    "p3": {
        name: "Skyline Penthouse",        price: "$6,200,000",        description: "Experience the pinnacle of urban luxury in this Manhattan penthouse, featuring floor-to-ceiling windows and a private roof terrace.",        images: [{ src: "http://img.b2bpic.net/free-photo/seductive-woman-black-silk-robe-sits-windowsill-looking-new-york_8353-1451.jpg", alt: "Skyline Penthouse Interior" }]
    },
    "p4": {
        name: "Manor Heritage House",        price: "$15,000,000",        description: "An iconic historical manor preserved with modern amenities, set amidst 50 acres of private gardens in the English countryside.",        images: [{ src: "http://img.b2bpic.net/free-photo/amazing-landscape-surrounding-adare-manor-ireland_493961-1381.jpg", alt: "Manor Heritage House Grounds" }]
    },
    "p5": {
        name: "Alpine Resort Chalet",        price: "$5,500,000",        description: "The ultimate mountain retreat featuring bespoke woodwork, geothermal heating, and ski-in/ski-out accessibility.",        images: [{ src: "http://img.b2bpic.net/free-photo/white-blue-bus-road-near-lake-daytime_417767-371.jpg", alt: "Alpine Resort Chalet" }]
    },
    "p6": {
        name: "Modern Beachfront Villa",        price: "$9,800,000",        description: "Minimalist design meets coastal elegance. This Miami masterpiece features an open floor plan and custom infinity edge pool.",        images: [{ src: "http://img.b2bpic.net/free-photo/vertical-picture-spiral-staircase-building-sunlight-huatulco-mexico_181624-26945.jpg", alt: "Miami Villa Staircase" }]
    }
  };

  const property = propertyData[id as string] || {
    name: "Property Not Found",    price: "N/A",    description: "This property is currently unavailable.",    images: []
  };
  
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          navItems={[{ name: "Back to Home", id: "/" }]}
          brandName="Aura Luxury Estates"
        />
      </div>
      <main className="container mx-auto py-20 px-6">
        <ProductDetailCard
            layout="page"
            name={property.name}
            price={property.price}
            description={property.description}
            images={property.images}
            rating={5}
            ratingIcon={Star}
            buttons={[{ text: "Inquire About This Property", href: "/#contact" }]}
        />
      </main>
    </ThemeProvider>
  );
}