marketing-geo-site-builder/website/src/components/LanguagePicker.astro

---
/**
 * Language switcher component.
 * Provides a link to the alternate language version of the current page.
 */
import { getAltLang } from '@i18n/utils';

interface Props {
  lang?: 'zh' | 'en';
  currentPath?: string;
}

const { lang = 'zh', currentPath = '/' } = Astro.props;

const altLang = getAltLang(lang);

// Build the alternate language path by replacing the language prefix
const pathParts = currentPath.split('/').filter(Boolean);
// Remove current lang prefix if present
if (pathParts[0] === lang) {
  pathParts.shift();
}
const altPath = `/${altLang}/${pathParts.join('/')}`;
---

<a
  href={altPath}
  class="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-sm font-medium text-dark-500 hover:text-primary-600 hover:bg-primary-50 transition-colors"
  hreflang={altLang === 'zh' ? 'zh-CN' : 'en-US'}
  title={lang === 'zh' ? 'Switch to English' : '切换到中文'}
>
  <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <span>{lang === 'zh' ? 'EN' : '中文'}</span>
</a>