"use client"
import Crumb from "@/components/ui/Crumb"
import Image, { StaticImageData } from "next/image"
import { useEffect } from "react"
import { useInView } from "react-intersection-observer"

type Header = {
  image: string | StaticImageData
  crumb: {
    path: string
    label: string
  }[]
  title: string
}
const Header = ({ crumb, image, title }: Header) => {
  const { ref, inView } = useInView({
    threshold: 0,
  })
  useEffect(() => {
    if (typeof window !== "undefined") {
      const largeNavbar = document.querySelector("#largeNavBar");
      if (largeNavbar) {
        // @ts-ignore
        largeNavbar.style.position = inView ? "absolute" : "fixed";
      }
    }
  }, [inView]);
  return (
    <div className="relative" ref={ref}>
      <Image
        src={image}
        alt="header"
        className="aspect-[1440/448] object-cover w-full min-h-[448px]"
        width={1440}
        height={448}
      />
      <div className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50" />
      <Crumb crumb={crumb} title={title} />
    </div>
  )
}

export default Header