"use client";
import { useState, useEffect } from "react";
import Logo from "./Logo";
import DesktopNavigation from "./DesktopNavigation";
import DesktopActions from "./DesktopActions";
import MobileMenuButton from "./MobileMenuButton";
import MobileMenu from "./MobileMenu";
import InnerPageActions from "./InnerPageActions";

interface HeaderProps {
  innerPage?: boolean;
}

export default function Header({ innerPage = false }: HeaderProps) {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10);
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <header
      className={`fixed top-0 left-0 w-full bg-transparent z-99 transition-all duration-300 
    ${
      isScrolled ? "px-3 pt-3 md:px-5 md:pt-5" : "px-5 pt-5 md:px-10 md:pt-10"
    }`}
    >
      <div
        className={`flex items-center justify-between px-5 md:px-6 bg-bg rounded-full transition-all duration-300 ${
          isScrolled
            ? "shadow-card backdrop-blur-md bg-bg/70 py-2 md:py-3"
            : "py-5 md:py-6"
        }`}
      >
        <Logo isScrolled={isScrolled} />
        {!innerPage && (
          <>
            <DesktopNavigation />
            <DesktopActions />
            <MobileMenuButton onClick={() => setIsMenuOpen(!isMenuOpen)} />
          </>
        )}
        {innerPage && <InnerPageActions />}
      </div>

      {!innerPage && (
        <MobileMenu isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} />
      )}
    </header>
  );
}