import { NavLink } from "react-router-dom";
import styles from './Header.module.css'
import logo from '../../assets/images/Logo.jpg'
import { useState } from "react";
import { useAppDispatch } from "../../app/hooks";
import { setSelectedCategory } from "../../features/catalog/categoriesSlice";

const Header = () =>{
const [menuOpen, setMenuOpen] = useState(false);
const dispatch = useAppDispatch();

    return (
        <nav className={styles.header}>
            <div className={styles.headerMenu}>
                
                <div className={styles.headeLogo}>
                    <img src={logo} alt="logo" className={styles.logoImage}/>
                    <div className={styles.phoneBlock}>
                        <a href="">+7 910 121 09 62</a>
                    </div>
                </div>

                {/* БУРГЕР */}
                <div 
                    className={`${styles.burger} ${menuOpen ? styles.active : ""}`}
                    onClick={() => setMenuOpen(!menuOpen)}
                >
                    <span></span>
                    <span></span>
                    <span></span>
                </div>

                {/* НАВИГАЦИЯ */}
                <div className={`${styles.headerNav} ${menuOpen ? styles.open : ""}`}>
                    <NavLink to="/" end onClick={() => setMenuOpen(false)}>ГЛАВНАЯ</NavLink>
                    <NavLink to="about" onClick={() => setMenuOpen(false)}>О КОМПАНИИ</NavLink>
                    <NavLink to="products" onClick={() => {setMenuOpen(false); dispatch(setSelectedCategory(null))}}>ПРОДУКЦИЯ</NavLink>
                </div>

            </div>
        </nav>
    )
}

export default Header;