"use client";

import { useState, useEffect } from "react";
import Container from "react-bootstrap/Container";
import styles from "@/styles/Header.module.scss";
import Navigation from "../Navigation";

const Header: React.FC = () => {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 30) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <div className={`${styles.Header} ${scrolled ? styles.scrolled : ""}`}>
      <Container className="bigContainer">
        <Navigation />
      </Container>
    </div>
  );
};

export default Header;