'use client'

import {
  AdminLanguageSwitcher,
  AdminThemeSwitcher,
  useAdminI18n,
} from '@/components/I18nProvider'

const languageMeta = {
  en: { flag: '🇺🇸', shortLabel: 'EN' },
  fr: { flag: '🇫🇷', shortLabel: 'FR' },
  ar: { flag: '🇲🇦', shortLabel: 'AR' },
} as const

export default function PublicFooter() {
  const { language } = useAdminI18n()
  const currentLanguage = languageMeta[language]
  const dict = {
    en: {
      preferences: 'Admin preferences',
    },
    fr: {
      preferences: 'Préférences d’administration',
    },
    ar: {
      preferences: 'تفضيلات الإدارة',
    },
  }[language]

  return (
    <footer className="border-t border-stone-200/80 bg-white/72 px-4 py-4 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-[#07101e]/72">
      <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-3 lg:flex-row">
        <div className="flex items-center gap-3 text-xs font-medium uppercase tracking-[0.16em] text-stone-400 dark:text-stone-500">
          <p>{dict.preferences}</p>
          <span className="inline-flex items-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2.5 py-1 text-stone-700 dark:border-blue-800 dark:bg-[#0d1b38]/85 dark:text-stone-200">
            <span aria-hidden="true">{currentLanguage.flag}</span>
            <span>{currentLanguage.shortLabel}</span>
          </span>
        </div>
        <div className="flex flex-col items-center gap-3 sm:flex-row">
          <AdminLanguageSwitcher />
          <AdminThemeSwitcher />
        </div>
      </div>
    </footer>
  )
}