import { getSession, signOut } from "next-auth/react";
import Image from "next/image";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { cleanImage } from "../../services/imageHandling";
import { Button, Container, Form, Nav, Navbar } from "react-bootstrap";

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

  useEffect(() => {
    const handleScroll = () => {
      // Check if the scroll position is greater than a certain threshold
      const scrollY = window.scrollY || window.pageYOffset;
      setIsSticky(scrollY > 50);
    };

    // Attach the scroll event listener when the component mounts
    window.addEventListener('scroll', handleScroll);

    // Clean up the event listener when the component unmounts
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []); 
  return (
    <header className={`header_wrap ${isSticky ? 'stick' : ''}`}>
    <Navbar expand="lg" className="bg-body-tertiary">
      <Container fluid>
        <Navbar.Brand href="#">
          <span className="image-container">
            <Image layout="fill" alt="" className="image img-fluid" src="/images/Zango-logo.svg" />
          </span>
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="navbarScroll" />
        <Navbar.Collapse id="navbarScroll">
          <Nav className=" my-2 my-lg-0" style={{ maxHeight: "100px" }} navbarScroll>
            <Nav.Link href="#action1">Blogs</Nav.Link>
            <Nav.Link href="#action2" className="gift-card">
              Gift Card
              <span className="image-container">
                <Image layout="fill" className="image img-fluid" src="/images/icons/gift-card-icon.svg" alt="" />
              </span>
            </Nav.Link>
          </Nav>
          <Form className="d-flex me-3">
            <div className="header-search">
              <Form.Control type="search" placeholder="Search" className="me-2" aria-label="Search" />
              <Button className="search-icon" variant="outline-success">
                <span className="image-container">
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/search-icon.svg" />
                </span>
              </Button>
            </div>
          </Form>
          <Button className="me-3" variant="primary">
              Sign Up
          </Button>
          <Button className="" variant="primary">
              Log In
          </Button>
        </Navbar.Collapse>
      </Container>
    </Navbar>
    </header>
  );
};

export default Header;