// Import necessary React components and libraries.

import React, { useState, useEffect } from "react";

import styled from "styled-components";

import { FaHome } from "react-icons/fa";

​

// Define styled components for different sections of the header.

const HeaderContainer = styled.header`

  /* Styling for the header container. */

  position: fixed;

  top: ${({ isFixed }) => (isFixed ? "0" : "-100px")};

  left: 0;

  right: 0;

  z-index: 1000;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background-color: #333;

  color: #fff;

  padding: 20px 40px;

  transition: top 0.7s ease-in-out;

`;

​

const LeftSection = styled.div`

  /* Styling for the left section of the header. */

  display: flex;

  align-items: center;

`;

​

const CenterSection = styled.div`

  /* Styling for the center section of the header. */

  ul {

    list-style: none;

    display: flex;

    margin: 0;

    padding: 0;

  }

​

  li {

    margin-right: 20px;

  }

​

  a {

    text-decoration: none;

    color: #fff;

    font-weight: bold;

  }

`;

​

const RightSection = styled.div`

  /* Styling for the right section of the header. */

  display: flex;

  align-items: center;

`;

​

const Logo = styled.div`

  /* Styling for the logo within the header. */

  display: flex;

  align-items: center;

  margin-right: 20px;

​

  svg {

    margin-right: 10px;

  }

`;

​

// Header component definition.

const Header = () => {

  // Define a state variable 'isFixed' to manage header positioning.

  const [isFixed, setIsFixed] = useState(true);

​

  // Listen to scroll events and update 'isFixed' accordingly.

  useEffect(() => {

    // Initialize 'prevScrollY' to keep track of previous scroll position.

    let prevScrollY = 0;

​

    // Define a function to handle scroll events.

    const handleScroll = () => {

      // Get the current scroll position.

      const currentScrollY = window.scrollY;

​

      // Check if the user has scrolled down and has scrolled past a certain threshold.

      if (currentScrollY > 200 && currentScrollY > prevScrollY) {

        setIsFixed(false); // Make the header not fixed.

      } else if (currentScrollY <= prevScrollY) {

        setIsFixed(true); // Make the header fixed when scrolling up.

      }

​

      // Update 'prevScrollY' with the current scroll position.

      prevScrollY = currentScrollY;

    };

​

    // Add a scroll event listener to the window.

    window.addEventListener("scroll", handleScroll);

​

    // Clean up the event listener when the component unmounts.

    return () => {

      window.removeEventListener("scroll", handleScroll);

    };

  }, []);

​

  // Render the header component.

  return (

    <HeaderContainer isFixed={isFixed}>

      <LeftSection>

        <Logo>

          <FaHome size={24} />

          <span>Company Name</span>

        </Logo>

      </LeftSection>

​

      <CenterSection>

        <ul>

          <li>

            <a href="/">Home</a>

          </li>

          <li>

            <a href="/products">Products</a>

          </li>

          {/* Add more menu items as needed */}

        </ul>

      </CenterSection>

​

      <RightSection>

        <a href="/login">Login</a>

        <span> | </span>

        <a href="/signup">Sign Up</a>

      </RightSection>

    </HeaderContainer>

  );

};

​

// Export the Header component for use in other parts of the application.

export default Header;

​