'use client'

import Link from 'next/link'
import { AdminLanguageSwitcher, useAdminI18n } from '@/components/I18nProvider'

export default function PublicShell({ children }: { children: React.ReactNode }) {
  const { language } = useAdminI18n()
  const dict = {
    en: {
      admin: 'Admin Console',
      signIn: 'Sign in',
      preferences: 'Admin preferences',
    },
    fr: {
      admin: 'Console admin',
      signIn: 'Connexion',
      preferences: 'Preferences admin',
    },
    ar: {
      admin: 'لوحة الإدارة',
      signIn: 'تسجيل الدخول',
      preferences: 'تفضيلات الإدارة',
    },
  }[language]

  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-100">
      <header className="sticky top-0 z-30 border-b border-zinc-800 bg-zinc-950/90 backdrop-blur-md">
        <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4">
          <Link href="/" className="flex items-center gap-3">
            <span className="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-400">RentalDriveGo</span>
            <span className="hidden text-sm font-semibold text-zinc-400 sm:inline">{dict.admin}</span>
          </Link>
          <nav className="flex items-center gap-2">
            <Link href="/login" className="rounded-full bg-zinc-100 px-4 py-2 text-sm font-semibold text-zinc-950 transition hover:bg-zinc-300">
              {dict.signIn}
            </Link>
          </nav>
        </div>
      </header>
      <div>{children}</div>
      <footer className="border-t border-stone-200 bg-white/90 px-4 py-4 backdrop-blur-md transition-colors">
        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-3 lg:flex-row">
          <p className="text-xs font-medium uppercase tracking-[0.16em] text-stone-400">
            {dict.preferences}
          </p>
          <div className="flex flex-col items-center gap-3 sm:flex-row">
            <AdminLanguageSwitcher />
          </div>
        </div>
      </footer>
    </div>
  )
}