"use client";

import { useParams } from 'next/navigation';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';

export default function PropertyDetailPage() {
  const { id } = useParams();
  
  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">
        <h1 className="text-4xl font-bold mb-6">Property Detail: {id}</h1>
        <p>Detailed specifications, pricing, and high-resolution media for the property would be displayed here.</p>
      </main>
    </ThemeProvider>
  );
}