'use client';

import { usePortalI18n } from '@/lib/i18n/provider';

const OPTIONS = [
  { value: 'zh-CN', label: 'ZH' },
  { value: 'en-US', label: 'EN' },
] as const;

export function LanguageSwitcher() {
  const { locale, setLocale } = usePortalI18n();

  return (
    <div className="inline-flex items-center gap-1 rounded-full border border-white/15 bg-black/25 p-1 backdrop-blur">
      <span className="ml-1 text-[11px] font-medium uppercase tracking-[0.14em] text-white/70">Lang</span>
      {OPTIONS.map((option) => (
        <button
          key={option.value}
          type="button"
          onClick={() => setLocale(option.value)}
          className={`rounded-full px-2.5 py-1 text-xs font-medium transition-colors ${
            locale === option.value
              ? 'bg-white text-slate-900'
              : 'text-white/75 hover:text-white'
          }`}
        >
          {option.label}
        </button>
      ))}
    </div>
  );
}