import { useNavigate } from "react-router-dom";
import BurgerClose from "./BurgerClose";

export default function BurgerMenu({ isOpen, onClose }) {
  const raw = localStorage.getItem("user");
  let user = null;
  try {
    user = raw ? JSON.parse(raw) : null;
  } catch {
    user = null;
  }

  const isAdmin = user?.role == "Админ";
  const navigate = useNavigate();
  return (
    <div
      onClick={onClose}
      className={`fixed inset-0 bg-black/60 backdrop-blur-sm z-40 transition-all duration-300 ease-in-out ${isOpen ? "visible" : "invisible"}
      `}
    >
      <div
        className={`fixed top-0 left-0 bottom-0 w-4/5 max-w-sm bg-dark-blue z-50 flex flex-col transition-transform duration-300 ease-in-out ${isOpen ? "translate-x-0" : "-translate-x-full"
          }`}
      >
        <div className="flex justify-start pt-12 px-6">
          <button onClick={onClose}>
            <BurgerClose />
          </button>
        </div>
        <div className="flex flex-col text-lg font-medium text-white gap-6 py-4 transition-color duration-200 hover:text-gold justify-center items-center">
          <button
            className="hover:text-gold duration-200 transition uppercase"
            onClick={() => navigate("/about")}
          >
            fish fish
          </button>
          <svg
            width="4"
            height="4"
            viewBox="0 0 4 4"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="2" cy="2" r="2" fill="white" />
          </svg>
          <button
            className="hover:text-gold duration-200 transition uppercase"
            onClick={() => navigate("/shop")}
          >
            ассортимент
          </button>
          <svg
            width="4"
            height="4"
            viewBox="0 0 4 4"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="2" cy="2" r="2" fill="white" />
          </svg>
          <button
            className="hover:text-gold duration-200 transition uppercase"
            onClick={() => navigate("/contact")}
          >
            контакты
          </button>
          {isAdmin && (
            <>
              <svg
                width="4"
                height="4"
                viewBox="0 0 4 4"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle cx="2" cy="2" r="2" fill="white" />
              </svg>
              <button
                className="hover:text-gold duration-200 transition uppercase"
                onClick={() => navigate("/admin")}
              >
                админ
              </button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}
