'use client';
import { useEffect, useState } from 'react';
import Logo from "./Logo";
import Menu from "./Menu";
import Search from "./Search";
import Cart from "./Cart";
import Account from "./Account";
import { usePathname } from 'next/navigation'

export default function Header() {
    const pathname = usePathname()
    const isHome = pathname === '/';

    const [isSticky, setIsSticky] = useState(false);

    useEffect(() => {
        const scrollTop = isHome ? 800 : 400;
        const onScroll = () => {
            setIsSticky(window.scrollY > scrollTop);
        };

        window.addEventListener('scroll', onScroll);
        return () => window.removeEventListener('scroll', onScroll);
    }, []);

    return (
        <>
        <div className={`global-header-container py-5 ${isSticky ? 'is-fixed' : ''} ${isHome && !isSticky ? 'header-homepage' : ''}`}>
            <div className="container flex items-center justify-between gap-5 relative">
                <div className="header-left-group w-[205px]">
                    <Logo />
                </div>

                <div className="header-middle-group w-[583px] flex items-center justify-between gap-2">
                    <Menu />

                    <Search />
                </div>

                <div className="header-right-group relative flex items-center justify-between gap-4 w-[420px] text-white leading-[18px] font-500">
                    <a href="#fancybox-headphone" className="flex items-center gap-2" data-fancybox>
                        <i className="icons icon-headphone"></i>
                        <span className="text"> Hotline<br/> Mua Hàng </span>
                    </a>

                    <a href="/he-thong-cua-hang" className="flex items-center gap-2">
                        <i className="icons icon-showroom"></i>
                        <span className="text"> Hệ thống<br/> Showroom </span>
                    </a>

                    <Cart />

                    <Account />
                </div>
            </div>
        </div>

        <div className="bg-white shadow-[0px_4px_20px_0px_#004AA11A] text-16 font-500 mb-5">
            <div className="container flex items-center justify-between leading-[20px] py-[17px]">
                <a href="/buildpc" className="flex items-center gap-2 hover:text-[#0678DB]">
                    <i className="icons icon-buildpc"></i>
                    <span> Xây Dựng Cấu Hình </span>
                </a>

                <a href="/designer-tool" className="flex items-center gap-2 hover:text-[#0678DB]">
                    <i className="icons icon-tool"></i>
                    <span> PC Đồ Họa Tool </span>
                </a>

                <a href="/tin-khuyen-mai" className="flex items-center gap-2 hover:text-[#0678DB]">
                    <i className="icons icon-promotion"></i>
                    <span> Chương Trình Khuyến Mãi </span>
                </a>

                <a href="/tin-tuc" className="flex items-center gap-2 hover:text-[#0678DB]">
                    <i className="icons icon-news"></i>
                    <span> Tin Tức Công Nghệ </span>
                </a>

                <a href="/chinh-sach-bao-hanh" className="flex items-center gap-2 hover:text-[#0678DB]">
                    <i className="icons icon-warranty"></i>
                    <span> Bảo Hành Tận Nhà </span>
                </a>

                <a href="#fancybox-feedback" data-fancybox="" className="flex items-center gap-2 hover:text-[#0678DB]">
                    <i className="icons icon-feedback"></i>
                    <span> Feedback </span>
                </a>
            </div>
        </div>
        </>
    )
}