"use client";

import { useLanguage } from "@/lib/language-context";
import type { Locale } from "@/lib/i18n";

interface LanguageSwitcherProps {
  className?: string;
  dark?: boolean;
}

export default function LanguageSwitcher({ className = "", dark = false }: LanguageSwitcherProps) {
  const { locale, t, setLocale } = useLanguage();

  const toggle = () => {
    const next: Locale = locale === "ar" ? "en" : "ar";
    setLocale(next);
  };

  const displayText = locale === "ar" ? "E" : "ع";

  return (
    <button
      onClick={toggle}
      className={`w-11 h-11 flex items-center justify-center rounded-xl text-sm font-bold transition-colors ${
        dark
          ? "text-white/80 hover:text-white hover:bg-white/10"
          : "text-gray-600 hover:text-gray-900 hover:bg-black/5"
      } ${className}`}
      aria-label={`Switch to ${t.language.switchTo}`}
      title={t.language.switchTo}
    >
      {displayText}
    </button>
  );
}