import { NextIntlClientProvider } from 'next-intl'
import { getMessages } from 'next-intl/server'
import { notFound } from 'next/navigation'
import Link from 'next/link'
import { locales } from '@/i18n'
import Providers from './Providers'
import Navbar from '@/components/nav/Navbar'

interface LayoutProps {
  children: React.ReactNode
  params: { locale: string }
}

export default async function LocaleLayout({ children, params: { locale } }: LayoutProps) {
  if (!locales.includes(locale as (typeof locales)[number])) {
    notFound()
  }

  const messages = await getMessages()
  const href = (path: string) => `/${locale}${path}`

  return (
    <NextIntlClientProvider messages={messages}>
      <Providers>
        <Navbar />
        <main>{children}</main>
        <footer style={{
          borderTop: '1px solid var(--line)',
          padding: '20px 32px',
          display: 'flex',
          gap: 16,
          alignItems: 'center',
          flexWrap: 'wrap',
          fontSize: 12,
          color: 'var(--ink-3)',
          marginTop: 48,
        }}>
          <span>© {new Date().getFullYear()} TrumpSignal</span>
          <Link href={href('/privacy')} style={{ color: 'var(--ink-3)', textDecoration: 'none' }}>Privacy</Link>
          <Link href={href('/terms')} style={{ color: 'var(--ink-3)', textDecoration: 'none' }}>Terms</Link>
          <Link href={href('/contact')} style={{ color: 'var(--ink-3)', textDecoration: 'none' }}>Contact</Link>
        </footer>
      </Providers>
    </NextIntlClientProvider>
  )
}