import { setRequestLocale } from 'next-intl/server'
import { MOCK_TOURS } from '@/lib/mock'
import { notFound } from 'next/navigation'
import Image from 'next/image'
import { Clock, Star } from 'lucide-react'

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

  const tour = MOCK_TOURS.find(t => t.slug === slug)
  if (!tour) notFound()

  return (
    <div className="bg-zinc-950 min-h-screen py-12">
      <div className="container mx-auto px-4 max-w-6xl">
        <div className="bg-zinc-900 rounded-2xl overflow-hidden shadow-2xl border border-zinc-800 flex flex-col md:flex-row">
          <div className="w-full md:w-1/2 relative h-64 md:h-auto">
            <Image src={tour.imageUrl || ''} alt={tour.title} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover" />
          </div>
          <div className="w-full md:w-1/2 p-8 md:p-12 flex flex-col">
            <h1 className="text-3xl md:text-4xl font-black mb-4 text-white">
              {tour.title}
            </h1>
            <div className="flex items-center space-x-6 text-sm text-zinc-400 mb-8">
              <span className="flex items-center"><Clock className="w-4 h-4 mr-1 text-orange-500" /> {tour.duration}</span>
              <span className="flex items-center"><Star className="w-4 h-4 mr-1 text-orange-500 fill-current" /> 5.0 (Review)</span>
            </div>
            
            <p className="text-zinc-300 mb-8 leading-relaxed text-lg">
              {tour.description}
            </p>

            <div className="mt-auto bg-zinc-950 p-6 rounded-xl flex items-center justify-between border border-zinc-800">
              <div>
                <span className="text-sm text-zinc-500 uppercase tracking-wider block mb-1">Price per person</span>
                <span className="font-black text-4xl text-orange-500">${tour.price}</span>
              </div>
              <button className="px-8 py-4 bg-orange-500 text-white font-bold rounded-lg hover:bg-orange-600 transition-all duration-300 shadow-[0_0_15px_rgba(249,115,22,0.4)] hover:shadow-[0_0_25px_rgba(249,115,22,0.6)] transform hover:-translate-y-0.5">
                Book Now
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}