'use client';

import { Language, setLanguage, useLanguage } from '@/lib/i18n';

function Flag({ language }: { language: Language }) {
  if (language === 'en') {
    // Union Jack (UK flag) - simplified but recognizable
    return (
      <svg width="24" height="16" viewBox="0 0 60 30" fill="none" aria-hidden="true">
        {/* Blue background */}
        <rect width="60" height="30" fill="#012169"/>
        {/* White diagonal saltire (St Andrew) */}
        <path d="M0 0L60 30M60 0L0 30" stroke="white" strokeWidth="6"/>
        {/* Red diagonal saltire (St Patrick) - offset */}
        <path d="M0 0L30 15M60 0L30 15" stroke="#C8102E" strokeWidth="2"/>
        <path d="M60 30L30 15M0 30L30 15" stroke="#C8102E" strokeWidth="2"/>
        {/* White cross (St George + St Andrew) */}
        <rect x="25" y="0" width="10" height="30" fill="white"/>
        <rect x="0" y="10" width="60" height="10" fill="white"/>
        {/* Red cross (St George) */}
        <rect x="27" y="0" width="6" height="30" fill="#C8102E"/>
        <rect x="0" y="12" width="60" height="6" fill="#C8102E"/>
      </svg>
    );
  }

  return (
    <svg width="24" height="16" viewBox="0 0 24 16" fill="none" aria-hidden="true">
      <rect width="24" height="8" fill="#FFD100" />
      <rect y="8" width="24" height="4" fill="#073685" />
      <rect y="12" width="24" height="4" fill="#EF3340" />
      <circle cx="12" cy="8.2" r="2.2" fill="#FFFFFF" opacity="0.95" />
      <circle cx="12" cy="8.2" r="1.1" fill="#EF3340" opacity="0.8" />
    </svg>
  );
}

export default function LanguageSwitcher() {
  const currentLang = useLanguage();
  const nextLanguage = currentLang === 'en' ? 'es' : 'en';

  const toggleLanguage = () => {
    setLanguage(nextLanguage);
  };

  return (
    <button
      onClick={toggleLanguage}
      style={{
        position: 'fixed',
        top: '0.5rem',
        right: '7rem',
        zIndex: 1000,
        background: 'rgba(255, 255, 255, 0.9)',
        border: '1px solid #ddd',
        borderRadius: '4px',
        padding: '0.5rem',
        cursor: 'pointer',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
      aria-label={`Switch to ${currentLang === 'en' ? 'Spanish' : 'English'}`}
    >
      <Flag language={nextLanguage} />
    </button>
  );
}
