import { ChevronDown } from "lucide-react";
import { useTranslation } from "react-i18next";
import { useAppearance } from "@/store/appearanceStore";
import type { AppearanceId } from "@/theme/appearance.config";

export function AppearanceSwitcher() {
  const { t } = useTranslation();
  const { proposal, setAppearance, proposals } = useAppearance();

  return (
    <div className="relative flex items-center gap-1.5">
      <label htmlFor="appearance-select" className="sr-only">
        {t("appearance.label")}
      </label>
      <span
        className="hidden h-3 w-3 shrink-0 rounded-full sm:inline-block"
        style={{ backgroundColor: proposal.swatch }}
        aria-hidden="true"
      />
      <div className="relative">
        <select
          id="appearance-select"
          value={proposal.id}
          onChange={(e) => setAppearance(e.target.value as AppearanceId)}
          className="select !w-auto max-w-[9.5rem] !py-2 !pr-9 !text-sm sm:max-w-none"
          aria-label={t("appearance.label")}
        >
          {proposals.map((p) => (
            <option key={p.id} value={p.id}>
              {t(p.labelKey)}
            </option>
          ))}
        </select>
        <ChevronDown
          className="pointer-events-none absolute right-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400"
          aria-hidden="true"
        />
      </div>
    </div>
  );
}
