"use client";

import { Globe } from "lucide-react";
import { useI18n } from "@/i18n";

export function LangSwitcher() {
  const { locale, setLocale } = useI18n();
  return (
    <button
      type="button"
      onClick={() => setLocale(locale === "en" ? "ar" : "en")}
      className="inline-flex items-center gap-1.5 rounded-md border border-input bg-surface px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm transition-colors hover:border-primary/30 hover:text-primary"
    >
      <Globe className="h-3.5 w-3.5" aria-hidden />
      {locale === "en" ? "العربية" : "English"}
    </button>
  );
}