'use client';

import Link from 'next/link';

interface Language {
  code: string;
  name: string;
  nativeName: string;
  flag: string;
}

interface LanguageSwitcherProps {
  currentLang: string;
}

const languages: Language[] = [
  { code: 'en', name: 'English', nativeName: 'English', flag: '🇺🇸' },
  { code: 'zh-CN', name: 'Chinese (Simplified)', nativeName: '简体中文', flag: '🇨🇳' },
];

export default function LanguageSwitcher({ currentLang }: LanguageSwitcherProps) {
  const getLocalizedPath = (langCode: string) => {
    if (langCode === 'en') {
      return '/';
    }
    return `/${langCode}`;
  };
  
  const otherLanguages = languages.filter(lang => lang.code !== currentLang);
  
  if (otherLanguages.length === 0) {
    return null;
  }

  return (
    <div className="flex items-center justify-center gap-3 mb-6">
      <span className="text-sm text-gray-500">Switch language:</span>
      <div className="flex gap-2">
        {otherLanguages.map((lang) => (
          <Link
            key={lang.code}
            href={getLocalizedPath(lang.code)}
            className="flex items-center gap-2 px-3 py-1.5 bg-white rounded-lg shadow-sm hover:shadow-md border border-gray-200 hover:border-blue-300 transition-all duration-200 text-sm font-medium text-gray-700 hover:text-blue-700"
          >
            <span className="text-base">{lang.flag}</span>
            <span>{lang.nativeName}</span>
          </Link>
        ))}
      </div>
    </div>
  );
}