import { useTranslation } from 'react-i18next'
import { Globe } from 'lucide-react'
import i18n from '../utils/i18n'

export default function Footer() {
  const { t } = useTranslation()
  const currentLang = i18n.language

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng)
  }

  return (
    <footer className="bg-nordic-navy border-t border-nordic-stone/20 py-12">
      <div className="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
        <div className="text-center md:text-left">
          <p className="text-nordic-ice font-bold text-lg">AI Data Ops Specialist</p>
          <p className="text-nordic-stone text-sm mt-1">Trondheim, Norway</p>
        </div>

        <div className="flex items-center gap-6">
          <div className="flex gap-2">
            <button 
              onClick={() => changeLanguage('nb')}
              className={`text-sm px-3 py-1 rounded border ${currentLang === 'nb' ? 'bg-nordic-cyan text-nordic-navy border-nordic-cyan' : 'border-nordic-stone text-nordic-stone hover:border-nordic-ice'}`}
            >
              NB
            </button>
            <button 
              onClick={() => changeLanguage('en')}
              className={`text-sm px-3 py-1 rounded border ${currentLang === 'en' ? 'bg-nordic-cyan text-nordic-navy border-nordic-cyan' : 'border-nordic-stone text-nordic-stone hover:border-nordic-ice'}`}
            >
              EN
            </button>
          </div>
        </div>
        
        <div className="text-nordic-stone text-xs font-mono">
          <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" className="hover:text-nordic-cyan transition-colors">
            Built with anycoder
          </a>
        </div>
      </div>
    </footer>
  )
}