"use client";

import { useLocale } from "@/components/providers/locale-provider";

export function LanguageSwitcher() {
  const { locale, setLocale } = useLocale();
  const flag = locale === "id" ? "🇮🇩" : "🇬🇧";

  return (
    <label className="inline-flex items-center gap-2 rounded-lg border border-line/70 px-3 py-2 text-[13px] font-semibold text-slate-700">
      <span className="text-base leading-none" aria-hidden="true">
        {flag}
      </span>
      <select
        value={locale}
        onChange={(event) => setLocale(event.target.value as "id" | "en")}
        aria-label="Language"
        className="bg-transparent pr-1 outline-none"
      >
        <option value="id">ID</option>
        <option value="en">EN</option>
      </select>
    </label>
  );
}
