import FadeInSection from "@/components/FadeInSection";
import Image from "next/image";
import { useEffect, useState } from "react";
import {
  backgroundHeader,
  backgroundHeaderPortrait,
  imageHeaderTitle,
} from "./constant/constant";

interface HeaderProps {
  height: number;
  portrait: boolean;
  width: number;
}

export default function Header({
  height,
  portrait,
  width,
}: Readonly<HeaderProps>) {
  const widthPercentageTitle = 0.84;
  const [widthTitle, setWidthTitle] = useState(width);

  useEffect(() => {
    function handleResize() {
      setWidthTitle(width * widthPercentageTitle);
    }

    handleResize();

    // Tambahkan event listener saat komponen dipasang (mount)
    window.addEventListener("resize", handleResize);

    // Hapus event listener saat komponen dilepas (unmount) untuk mencegah memory leak
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, [height, portrait, width]);

  return (
    <div
      className={`bg-center bg-cover flex ${
        (!portrait && "items-center justify-end") || "justify-center"
      } h-screen w-full`}
      style={{
        backgroundImage: `url(${
          portrait ? backgroundHeaderPortrait : backgroundHeader
        })`,
      }}
    >
      {portrait ? (
        <FadeInSection>
          <Image
            alt="Header Title"
            height={widthTitle}
            width={widthTitle}
            src={imageHeaderTitle}
          />
        </FadeInSection>
      ) : (
        <FadeInSection>
          <Image
            alt="Header Title"
            className="mr-4"
            height={widthTitle}
            width={widthTitle}
            src={imageHeaderTitle}
          />
        </FadeInSection>
      )}
    </div>
  );
}