"use client";

import React, { useEffect, useRef } from "react";
import gsap from "gsap";
import Image from "next/image";

const Loader = () => {
  // We need a DOM node that will be the clipping container
  const containerRef = useRef<HTMLDivElement>(null);
  const imgRef = useRef<HTMLImageElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    const img = imgRef.current;
    if (!container || !img) return;
    gsap.set(container, { width: "0", clipPath: "inset(0 100% 0 0)" });
    gsap.to(container, {
      width: "280px", // reveal left to right
      duration: 1.4,
      clipPath: "inset(0 0% 0 0)",
      ease: "expo.inout",
    });
  }, []);

  return (
    <div className="bg-brand fixed inset-0 z-100 flex h-screen w-full items-center justify-center">
      {/* Clipping container */}
      <div ref={containerRef} className="overflow-hidden pl-3">
        <Image
          ref={imgRef}
          src="/images/svg/whispering-logo.svg"
          alt="Whispering Trees"
          width={280}
          height={68}
          className="h-[68px] w-[250px] object-contain"
          priority
        />
      </div>
    </div>
  );
};

export default Loader;