import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { cn } from "@/lib/utils";
import { RTL_LANGUAGES } from "@/lib/rtlLanguages";
interface BurgerMenuProps {
  isOpen: boolean;
  onClose: () => void;
}

export function BurgerMenu({ isOpen, onClose }: BurgerMenuProps) {
  if (!isOpen) return null;
  const { t, i18n } = useTranslation();
  // slide-in-from-left/right — буквальные keyframe-имена (не логические
  // start/end), поэтому направление анимации приходится выбирать вручную.
  const isRtl = RTL_LANGUAGES.includes((i18n.language || "").split("-")[0]);
  return (
    <>
      {/* затемнение только под хедером */}
      <div
        className="fixed inset-x-0 bottom-0 top-25 z-30 bg-black/20 backdrop-blur-sm"
        onClick={onClose}
      />

      {/* меню — открывается от смыслового "начала" строки: слева в LTR, справа в RTL */}
      <div
        className={cn(
          "fixed start-0 top-25 z-60 h-[calc(100vh-4rem)] w-64 bg-card border-e p-6 shadow-xl animate-in",
          isRtl ? "slide-in-from-right" : "slide-in-from-left",
        )}
      >
        <nav className="flex flex-col gap-6" onClick={onClose}>
          <Link
            to="/"
            className="text-lg font-medium hover:text-primary transition-colors"
          >
            {t("home_label")}
          </Link>

          <Link
            to="/settings"
            className="text-lg font-medium hover:text-primary transition-colors"
          >
            {t("settings")}
          </Link>

          <Link
            to="/telegram"
            className="text-lg font-medium hover:text-primary transition-colors flex items-center gap-2"
          >
            <span className="w-2 h-2 rounded-full bg-primary/80 animate-pulse" />
            {t("tg_menu")}
          </Link>

          <Link
            to="/about"
            className="text-lg font-medium hover:text-primary transition-colors"
          >
            {t("about_title")}
          </Link>
        </nav>
      </div>
    </>
  );
}
