"use client";

import { useState } from "react";
import clsx from "clsx";

const navLinks = ["Home", "Work", "About", "Contact"];
const socialLinks = ["Instagram", "Facebook", "LinkedIn", "Tiktok"];

export default function Header2() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <div
        className={clsx(
          "fixed top-0 right-0 h-screen w-full max-w-[600px] bg-[#1C1D20] z-[100] transition-all duration-[600ms] ease-[cubic-bezier(0.77,0,0.175,1)]",
          open ? "translate-x-0" : "translate-x-1/1"
        )}
      >
        <div className="flex flex-col justify-between h-full px-[7.5vw] py-[15vh]">
          <div className="menu-nav">
            <div className="text-xs font-normal text-[#8E8E90] uppercase pb-5">
              Navigation
            </div>
            <div className="h-px bg-[#2C2C2C]"></div>
            <ul className="pt-10 flex flex-col gap-10">
              {navLinks.map((link, index) => (
                <li
                  key={link}
                  className={clsx(
                    "transform translate-x-[200px] list-none transition-all duration-500",
                    open && "!translate-x-0"
                  )}
                  style={{
                    transitionDelay: `${index * 100}ms`,
                  }}
                >
                  <a href="#" className="text-white text-5xl">
                    {link}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          <div className="socials-nav">
            <div className="text-xs font-normal text-[#8E8E90] uppercase pb-5">
              Navigation
            </div>
            <ul className="flex gap-2">
              {socialLinks.map((link) => (
                <li key={link} className="list-none">
                  <a href="#" className="text-white">
                    {link}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      <div
        className={clsx(
          "w-[70px] h-[70px] max-sm:w-[50px] max-sm:h-[50px] fixed top-[30px] right-[30px] max-sm:top-[10px] max-sm:right-[10px] rounded-full z-[10000] flex items-center justify-center flex-col gap-2 cursor-pointer transition-all duration-200",
          open ? "bg-[#455BE9]" : "bg-[#1C1D20]"
        )}
        onClick={() => setOpen(!open)}
      >
        <div
          className={clsx(
            "w-[25px] max-sm:w-[20px] h-px bg-white transition-all duration-200",
            open && "rotate-45 translate-x-[1px] translate-y-[4px]"
          )}
        ></div>
        <div
          className={clsx(
            "w-[25px] max-sm:w-[20px] h-px bg-white transition-all duration-200",
            open && "-rotate-45 translate-x-[1px] -translate-y-[5px]"
          )}
        ></div>
      </div>
    </>
  );
}
header-2
