"use client";

import { useLocale } from "~/components/locale-provider";
import type { Locale } from "~/lib/i18n";

const OPTIONS: { value: Locale; label: string }[] = [
  { value: "zh", label: "中文" },
  { value: "en", label: "English" },
];

export function LanguageSwitcher({ className = "" }: { className?: string }) {
  const { locale, setLocale, t } = useLocale();

  return (
    <label
      className={`inline-flex items-center gap-2 text-xs text-neutral-500 ${className}`}
    >
      <span className="sr-only">{t.languageLabel}</span>
      <select
        value={locale}
        onChange={(event) => setLocale(event.target.value as Locale)}
        aria-label={t.languageLabel}
        className="appearance-none rounded-lg border border-neutral-200 bg-white px-2.5 py-1.5 pr-7 text-xs font-medium text-neutral-700 shadow-sm outline-none transition hover:border-neutral-300 focus:border-neutral-400"
        style={{
          backgroundImage:
            "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\")",
          backgroundRepeat: "no-repeat",
          backgroundPosition: "right 0.55rem center",
        }}
      >
        {OPTIONS.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </label>
  );
}