import { notFound } from "next/navigation";
import Image from "next/image";
import { setRequestLocale } from "next-intl/server";
import { mockData } from "@/lib/mock-data";

export default async function RoomDetailPage({ 
  params 
}: { 
  params: Promise<{ locale: string; slug: string }> 
}) {
  const { locale, slug } = await params;
  setRequestLocale(locale);

  const room = mockData.accommodations.find(r => r.slug === slug);
  if (!room) {
    notFound();
  }

  return (
    <div className="pt-32 min-h-screen max-w-7xl mx-auto px-4 md:px-12 pb-24">
      <div className="relative w-full h-[500px] rounded-xl overflow-hidden mb-12">
        <Image 
          src={room.image} 
          alt={room.name} 
          fill 
          className="object-cover" 
          priority
        />
        <div className="absolute inset-0 bg-gradient-to-t from-[#002045]/80 to-transparent" />
        <div className="absolute bottom-0 left-0 p-12 text-white">
          <span className="bg-[#CA8A04] text-white px-3 py-1 rounded-full font-label-sm text-[12px] uppercase font-bold tracking-wider mb-4 inline-block">
            {room.type}
          </span>
          <h1 className="font-heading text-5xl md:text-6xl font-bold mb-4">{room.name}</h1>
          <p className="font-body-lg text-xl text-white/90">
            {room.location} • {room.bedrooms} Yatak Odası • {room.capacity} Kişi
          </p>
        </div>
      </div>

      <div className="max-w-3xl">
        <h2 className="font-heading text-3xl text-primary dark:text-primary-fixed-dim font-bold mb-6">Oda Detayları</h2>
        <p className="font-body-md text-lg text-on-surface-variant dark:text-outline leading-relaxed mb-8">
          Bu oda, konforunuz için özenle tasarlanmış benzersiz bir yaşam alanı sunar. 
          {room.name}, muhteşem Fethiye manzarasıyla birleşen lüks dokunuşlarla unutulmaz bir konaklama deneyimi vadediyor.
        </p>
      </div>
    </div>
  );
}