import { getTranslations, setRequestLocale } from 'next-intl/server'
import { MOCK_TOURS, MOCK_CATEGORIES } from '@/lib/mock'
import Link from 'next/link'
import Image from 'next/image'

export default async function ToursPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  
  const s = await getTranslations('sections')
  const t = await getTranslations('tour')

  return (
    <div className="bg-zinc-950 min-h-screen py-12">
      <div className="container mx-auto px-4">
        <h1 className="text-4xl font-black mb-8 text-white uppercase tracking-tighter">
          {s('categories')}
        </h1>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {MOCK_TOURS.map(tour => {
            const cat = MOCK_CATEGORIES.find(c => c.id === tour.categoryId)
            return (
              <div key={tour.id} className="bg-zinc-900 rounded-xl overflow-hidden shadow-lg border border-zinc-800 hover:border-orange-500/50 transition-all duration-300 flex flex-col group">
                <div className="relative h-56 overflow-hidden">
                  <Image src={tour.imageUrl || ''} alt={tour.title} fill sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw" className="object-cover group-hover:scale-110 transition-transform duration-500" />
                  {cat && (
                    <div className="absolute top-4 left-4 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow">
                      {cat.name}
                    </div>
                  )}
                </div>
                <div className="p-6 flex-1 flex flex-col">
                  <h3 className="font-bold text-xl mb-3 text-zinc-100 line-clamp-1">{tour.title}</h3>
                  <p className="text-zinc-400 text-sm mb-6 flex-1 line-clamp-3">{tour.description}</p>
                  <div className="flex items-center justify-between border-t border-zinc-800 pt-4 mt-auto">
                    <div>
                      <span className="text-xs text-zinc-500 uppercase tracking-wider block">{t('from')}</span>
                      <span className="font-bold text-2xl text-orange-500">${tour.price}</span>
                    </div>
                    <Link href={`/tours/${tour.slug}`} className="px-5 py-2.5 bg-zinc-800 text-white text-sm font-medium rounded-md hover:bg-orange-500 transition-colors duration-300">
                      {t('book_now')}
                    </Link>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
}