"use client";

import { ChevronDown, 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.5 size-4 text-accent" />
      <select
        aria-label={t("language.label")}
        value={language}
        onChange={(event) => setLanguage(event.target.value as Language)}
        className="surface-control h-11 min-w-36 appearance-none rounded-control py-2 pl-10 pr-10 text-sm font-medium text-foreground transition hover:bg-surface-raised/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
      >
        <option value="pl">{t("language.polish")}</option>
        <option value="en">{t("language.english")}</option>
      </select>
      <ChevronDown className="pointer-events-none absolute right-3.5 size-4 text-muted" />
    </label>
  );
}
