import { getTranslations, setRequestLocale } from 'next-intl/server'
import Link from 'next/link'

export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  
  const t = await getTranslations('hero')
  const nav = await getTranslations('nav')
  const footer = await getTranslations('footer')

  return (
    <div className="flex-1 flex flex-col min-h-screen">
      <header className="px-6 py-4 border-b flex items-center justify-between">
        <div className="font-bold text-xl">Boilerplate</div>
        <nav className="space-x-4">
          <Link href="/" className="text-gray-600 hover:text-gray-900">{nav('home')}</Link>
          <Link href="/about" className="text-gray-600 hover:text-gray-900">{nav('about')}</Link>
          <Link href="/contact" className="text-gray-600 hover:text-gray-900">{nav('contact')}</Link>
          <Link href="/login" className="px-4 py-2 bg-blue-600 text-white rounded-md text-sm">Login</Link>
        </nav>
      </header>

      <main className="flex-1 flex flex-col items-center justify-center text-center px-4">
        <h1 className="text-5xl font-extrabold tracking-tight text-gray-900 sm:text-7xl mb-6">
          {t('title')}
        </h1>
        <p className="mt-4 text-xl text-gray-500 max-w-2xl mx-auto mb-8">
          This is a dummy landing page to demonstrate the localization setup using next-intl.
        </p>
        <div className="flex space-x-4">
          <button className="px-8 py-3 bg-blue-600 text-white rounded-full font-medium hover:bg-blue-700 transition">
            {t('cta')}
          </button>
          
          <div className="flex bg-gray-100 rounded-full p-1">
            <Link href="/tr" className={`px-4 py-2 rounded-full text-sm font-medium ${locale === 'tr' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-900'}`}>TR</Link>
            <Link href="/en" className={`px-4 py-2 rounded-full text-sm font-medium ${locale === 'en' ? 'bg-white shadow-sm' : 'text-gray-500 hover:text-gray-900'}`}>EN</Link>
          </div>
        </div>
      </main>

      <footer className="py-6 border-t text-center text-gray-500 text-sm">
        <p>{footer('rights')} <a href="https://ayris.tech" className="hover:text-blue-600 transition">Created by ayris.tech</a></p>
      </footer>
    </div>
  )
}