"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";

const Sidebar = () => {
  const sidebarRef = useRef<HTMLDivElement | null>(null);
  const [stickyClass, setStickyClass] = useState("");

  useEffect(() => {
    const updateStickyClass = () => {
      const sidebarEl = sidebarRef.current;
      if (!sidebarEl) return;

      const sectionEl = sidebarEl.closest(".career-detail") as HTMLElement | null;
      if (!sectionEl) {
        setStickyClass(window.scrollY > 0 ? "is-fixed" : "");
        return;
      }

      const sectionTop = sectionEl.getBoundingClientRect().top + window.scrollY;
      const sectionHeight = sectionEl.offsetHeight;
      const sidebarHeight = sidebarEl.offsetHeight;
      const scrollY = window.scrollY;
      const start = sectionTop - 120;
      const end = sectionTop + sectionHeight - sidebarHeight - 120;

      if (scrollY >= start && scrollY <= end) {
        setStickyClass("is-fixed");
      } else if (scrollY > end) {
        setStickyClass("is-absolute");
      } else {
        setStickyClass("");
      }
    };

    updateStickyClass();
    window.addEventListener("scroll", updateStickyClass, { passive: true });
    window.addEventListener("resize", updateStickyClass);

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

  return (
    <div ref={sidebarRef} className={`side-bar3 ${stickyClass}`.trim()}>
      <div
        className="price-box"
        data-aos="fade-left"
        data-aos-duration={900}
        data-aos-delay={300}
      >
        <div className="price-box-content">
          <span className="sub-title">Full time</span>
          <span className="location">
            <Image
              src="/assets/images/icon/career1-2.svg"
              alt="Location icon"
              width={20}
              height={20}
            />
            New York
          </span>
        </div>
        <h3 className="title">
          <Image
            src="/assets/images/icon/dollar.svg"
            alt="Salary icon"
            width={20}
            height={20}
          />
          $44-55.000 year
        </h3>
      </div>
      <div
        className="career-banner"
        data-aos="fade-left"
        data-aos-duration={900}
        data-aos-delay={400}
      >
        <Image
          src="/assets/images/event/banner1-1.png"
          alt="Career Banner Image"
          width={410}
          height={330}
        />
        <div className="career-banner-content">
          <h3 className="title">
            Looking For Part/full time jobs? This is right place
          </h3>
          <Link href="/career" className="btn-style1">
            View Jobs
            <span>
              <Image
                src="/assets/images/icon/arrow.svg"
                alt="Arrow Icon for View Jobs"
                width={14}
                height={14}
              />
            </span>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default Sidebar;