'use client';
import "./Header.css";
import Link from "next/link";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
import Image from "next/image";
import { useEffect } from "react";
import { usePathname } from "next/navigation";
import Sidebar from "@/components/Sidebar";

const Header = () => {
  const pathname = usePathname();
  const isPlayerPage =
    pathname.startsWith("/player/movie") ||
    pathname.startsWith("/player/tvshow");

  useEffect(() => {
    const appContainer = document.querySelector('.app-container');
    if (appContainer) {
      if (isPlayerPage) {
        appContainer.classList.add('no-padding');
      } else {
        appContainer.classList.remove('no-padding');
      }
    }
  }, [isPlayerPage]);

  return (
    <>
      {!isPlayerPage && (
        <div className="header-container">
          <Sidebar />
          <div className="header-right">
            <div className="header-logo-container">
              <h1 className="header-title">Nexora</h1>
              <Image
                className="header-logo"
                src="/android-chrome-192x192.png"
                width={60}
                height={60}
                alt="Nexora Logo"
              />
            </div>
          </div>
          <Link href="/search" className="search-button">
            <FontAwesomeIcon icon={faSearch} size="xl" />
          </Link>
        </div>
      )}
    </>
  );
};

export default Header;