"use client";

import { useAppLocale, useLocaleActions } from "./LocaleProvider";
import type { AppLocale } from "./locale";

export function LocaleSwitcher() {
  const locale = useAppLocale();
  const { setLocale } = useLocaleActions();

  const handleToggle = () => {
    const nextLocale: AppLocale = locale === "en" ? "ko" : "en";
    setLocale(nextLocale);
  };

  const labelText = locale === "en" ? "EN" : "KO";

  return (
    <div className="fixed bottom-4 right-4 z-50 text-xs">
      <button
        type="button"
        aria-label="Toggle locale"
        className="inline-flex items-center justify-center rounded-full border border-slate-300 bg-white/80 px-2 py-1 text-slate-700 shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-900/80 dark:text-slate-100"
        onClick={handleToggle}
      >
        {labelText}
      </button>
    </div>
  );
}