"use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import clsx from "clsx";
import { getMediaUrl, getMetaData } from "../../lib/strapiClient";
import { DEFAULT_LOCALE, type SupportedLocale } from "../../lib/locale";

export default function TransparentNavbar({
  locale = DEFAULT_LOCALE,
}: {
  locale?: SupportedLocale;
}) {
  const [showLogo, setShowLogo] = useState(false);
  const [logoSrc, setLogoSrc] = useState<string | null>(null);

  useEffect(() => {
    const handleScroll = () => {
      const scrollThreshold = window.innerHeight * 0.5;
      setShowLogo(window.scrollY > scrollThreshold);
    };

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

  useEffect(() => {
    const loadMetaData = async () => {
      const meta = await getMetaData(locale);
      const logoUrl = getMediaUrl(meta?.[0]?.Logo);
      if (logoUrl) setLogoSrc(logoUrl);
    };

    loadMetaData();
  }, [locale]);

  return (
    <div
      className={clsx(
        "fixed top-5 left-5 z-50 transition-opacity duration-500 ease-in-out pointer-events-none",
        showLogo ? "opacity-100" : "opacity-0"
      )}
    >
      {logoSrc && (
        <Image
          src={logoSrc}
          alt="Logo"
          width={70}
          height={70}
          className="h-7 w-auto md:h-14"
        />
      )}
    </div>
  );
}