"use client";

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

export default function IntroLoader({
  isNavigation = false,
}: {
  isNavigation?: boolean;
}) {
  const [isOpening, setIsOpening] = useState(false);
  const [isLeaving, setIsLeaving] = useState(false);
  const [isVisible, setIsVisible] = useState(true);

  const openingTime = isNavigation ? 1300 : 200;
  const leavingTime = isNavigation ? 1900 : 800;
  const removeTime = isNavigation ? 2600 : 1400;

  useEffect(() => {
    const openingTimer = window.setTimeout(() => {
      setIsOpening(true);
    }, openingTime);

    const leaveTimer = window.setTimeout(() => {
      setIsLeaving(true);
    }, leavingTime);

    const removeTimer = window.setTimeout(() => {
      setIsVisible(false);
    }, removeTime);

    return () => {
      window.clearTimeout(openingTimer);
      window.clearTimeout(leaveTimer);
      window.clearTimeout(removeTimer);
    };
  }, [openingTime, leavingTime, removeTime]);

  if (!isVisible) return null;

  return (
    <div
      className={[
        "intro-loader",
        isOpening && "intro-loader--opening",
        isLeaving && "intro-loader--leave",
      ]
        .filter(Boolean)
        .join(" ")}
      aria-hidden="true"
    >

      {/* Background Image */}
      <Image
        src="https://pub-b0bc1a7c71a54576bbf43595e30e6188.r2.dev/images/hero/best-luxury-resort-stay-near-pune.jpg"
        alt="The Grand Heritage Resorts"
        title="The Grand Heritage Resorts"
        fill
        sizes="(min-width: 1024px) 100vw, 0px"
        className="intro-loader__background hidden lg:block object-cover opacity-60"
      />

      {/* Background Image - Mobile / Small Devices */}
      <Image
        src="https://pub-b0bc1a7c71a54576bbf43595e30e6188.r2.dev/images/hero/private-villa-near-pune.png"
        alt="The Grand Heritage Resorts"
        title="The Grand Heritage Resorts"
        fill
        sizes="(max-width: 1023px) 100vw, 0px"
        className="intro-loader__background block lg:hidden object-cover opacity-60"
      />

      {/* Existing Logo */}
      <Image
        src="https://pub-b0bc1a7c71a54576bbf43595e30e6188.r2.dev/images/hero/the-grand-heritage-resorts-logo.png"
        alt="The Grand Heritage Resorts Logo"
        title="The Grand Heritage Resorts Logo"
        width={180}
        height={110}
        quality={75}
        className="intro-loader__logo"
        style={{ height: "auto" }}
      />

    </div>
  );
}