"use client";

import Link from "next/link";
import { useState } from "react";

export default function Header() {
  const [isOpen, setIsOpen] = useState(false);

  return (
      <header className="p-5 bg-white/30 text-gray-800 fixed w-full z-10 backdrop-blur-md shadow-lg">
        <nav className="flex justify-between items-center max-w-6xl mx-auto">
          <h1 className="text-2xl md:text-3xl font-bold">Dennis Konkol</h1>
          <div className="flex items-center">
            <button
                className="md:hidden p-2 rounded-md bg-white/30 backdrop-blur-md shadow-inner transform transition-transform hover:scale-105 active:shadow-lg active:translate-y-1 neumorphism"
                onClick={() => setIsOpen(!isOpen)}
            >
              Menu
            </button>
            <ul
                className={`fixed top-0 right-0 h-full w-64 bg-white p-5 flex flex-col space-y-4 transition-transform duration-300 ${
                    isOpen ? "translate-x-0" : "translate-x-full"
                } md:static md:flex-row md:space-y-0 md:space-x-4 md:bg-transparent md:p-0 md:translate-x-0`}
            >
              {["About", "Projects", "Contact"].map((item, index) => (
                  <li
                      key={item}
                      className={`transition-opacity duration-500 delay-${index * 150} ${
                          isOpen ? "opacity-100" : "opacity-0"
                      } md:opacity-100`}
                  >
                    <Link
                        href={`#${item.toLowerCase()}`}
                        className="bg-white/30 p-2 rounded-md backdrop-blur-md shadow-inner transform transition-transform hover:scale-105 active:shadow-lg active:translate-y-1 neumorphism"
                    >
                      {item}
                    </Link>
                  </li>
              ))}
            </ul>
          </div>
        </nav>
      </header>
  );
}