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

export default function HeaderDesktop() {
  const navigate = useNavigate();

  const handleProfileClick = () => {
    const token = localStorage.getItem("token");
    if (token) {
      navigate("/orders");
    } else {
      navigate("/login");
    }
  };

  return (
    <header className="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-white">
        <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>
      </div>

      <div className="flex items-center">
        <button
          className="text-slate-200 hover:text-gold transition-colors duration-200 pr-7"
          onClick={handleProfileClick}
        >
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle
              cx="12"
              cy="7.5"
              r="4"
              stroke="currentColor"
              strokeLinecap="square"
              strokeLinejoin="round"
            />
            <path
              d="M21 21H3C3 17.6863 5.68629 15 9 15H15C18.3137 15 21 17.6863 21 21Z"
              stroke="currentColor"
              strokeLinecap="square"
            />
          </svg>
        </button>
        <button
          className="text-slate-200 hover:text-gold transition-colors duration-200"
          onClick={() => navigate("/cart")}
        >
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M16.2654 8H7.73459C6.73929 8 5.89545 8.73186 5.75469 9.71716L4.32612 19.7172C4.154 20.922 5.08892 22 6.30602 22H17.694C18.9111 22 19.846 20.922 19.6739 19.7172L18.2453 9.71716C18.1046 8.73186 17.2607 8 16.2654 8Z"
              stroke="currentColor"
            />
            <path
              d="M9 10V5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V10"
              stroke="currentColor"
            />
            <circle cx="9" cy="10" r="1" fill="currentColor" />
            <circle cx="15" cy="10" r="1" fill="currentColor" />
          </svg>
        </button>
      </div>
    </header>
  );
}