import { useNavigate } from "react-router-dom";
import siteLogo from "../assets/Исходники/logo.png";

export default function FooterDesktop() {
  const navigate = useNavigate();
  const raw = localStorage.getItem("user");
  let user = null;
  try {
    user = raw ? JSON.parse(raw) : null;
  } catch {
    user = null;
  }

  const isAdmin = user?.role == "Админ";

  return (
    <footer className="bg-light-blue w-full h-27.5 px-16 flex items-center justify-between ">
      <button
        className="flex flex-col items-center  text-lg tracking-widest text-gold"
        onClick={() => navigate("/")}
      >
        <img src={siteLogo} alt="Лого" className="w-12 h-12 object-contain" />
        <span>FISH FISH</span>
      </button>

      <div className="flex items-center gap-8 text-lg uppercase tracking-wider text-light-gray">
        <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 className="flex items-center">
        <button className="text-light-gray hover:text-gold transition-colors duration-200">
          +7 (800) 900-20-20
        </button>
      </div>
    </footer>
  );
}
