"use client";

import { Languages } from "lucide-react";
import { useI18n, type Language } from "@/lib/i18n";

export function LanguageToggle() {
  const { language, setLanguage, t } = useI18n();
  return (
    <label className="relative flex items-center">
      <span className="sr-only">{t("language.label")}</span>
      <Languages className="pointer-events-none absolute left-3 size-4 text-slate-700 dark:text-slate-200" />
      <select
        aria-label={t("language.label")}
        value={language}
        onChange={(event) => setLanguage(event.target.value as Language)}
        className="h-10 appearance-none rounded-full border border-white/30 bg-white/30 py-2 pl-9 pr-3 text-xs font-semibold uppercase text-slate-800 backdrop-blur-xl transition hover:bg-white/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-white/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/20"
      >
        <option value="pl">{t("language.polish")}</option>
        <option value="en">{t("language.english")}</option>
      </select>
    </label>
  );
}