"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Logo from "@/images/logo.png";

interface LoaderProps {
  duration?: number;
}

export default function Loader({
  duration = 2000,
}: LoaderProps) {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    const originalOverflow = document.body.style.overflow;
    const originalHtmlOverflow = document.documentElement.style.overflow;
    document.body.style.overflow = "hidden";
    document.documentElement.style.overflow = "hidden";

    const timer = setTimeout(() => {
      setVisible(false);
    }, duration);

    return () => {
      clearTimeout(timer);
      document.body.style.overflow = originalOverflow;
      document.documentElement.style.overflow = originalHtmlOverflow;
    };
  }, [duration]);

  if (!visible) return null;

  return (
    <>
      <div className="section-loader">
        <div className="loader-wrapper">
          <span className="loader-ring" />

          <Image
            src={Logo}
            alt="RKDA"
            width={45}
            height={45}
            priority
          />
        </div>
      </div>

      <style jsx>{`
        .section-loader {
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          background: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          z-index: 999999;
        }

        .loader-wrapper {
          position: relative;
          width: 80px;
          height: 80px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .loader-ring {
          position: absolute;
          inset: 0;
          border-radius: 50%;
          border: 3px solid rgba(191, 149, 63, 0.2);
          border-top-color: #bf953f;
          animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
          to {
            transform: rotate(360deg);
          }
        }
      `}</style>
    </>
  );
}