'use client';

import { useState } from 'react';
import HeaderTop from './HeaderTop';
import HeaderBottom from './HeaderBottom';
import Offcanvas from './Offcanvas';

const Header = () => {
    const [isOffcanvasOpen, setIsOffcanvasOpen] = useState(false);
    const [isSearchOpen, setIsSearchOpen] = useState(false);

    const toggleOffcanvas = () => setIsOffcanvasOpen(!isOffcanvasOpen);
    const toggleSearch = () => setIsSearchOpen(!isSearchOpen);

    return (
        <>
            <HeaderTop />
            <HeaderBottom 
                onToggleOffcanvas={toggleOffcanvas} 
                onToggleSearch={toggleSearch} 
            />
            
            <Offcanvas 
                isOpen={isOffcanvasOpen} 
                onClose={() => setIsOffcanvasOpen(false)} 
            />

            {/* Search Popup */}
            <div className={`search-popup ${isSearchOpen ? 'active' : ''}`}>
                <div 
                    className="search-popup__overlay search-toggler" 
                    onClick={() => setIsSearchOpen(false)}
                ></div>
                <div className="search-popup__content">
                    <form role="search" method="get" className="search-popup__form" action="#">
                        <input type="text" id="search" name="search" placeholder="Search Here..." />
                        <button type="submit" aria-label="search submit" className="search-btn">
                            <span><i className="fa-regular fa-magnifying-glass"></i></span>
                        </button>
                    </form>
                </div>
            </div>
        </>
    );
};

export default Header;