"use client";

import { AnimatePresence, motion } from "motion/react";
import Image from "next/image";

type LoadingModalProps = {
  open: boolean;
  title?: string;
  message: string;
  ariaLabel?: string;
};

export function LoadingModal({
  open,
  title = "Tunggu sebentar....",
  message,
  ariaLabel = "Memproses",
}: LoadingModalProps) {
  return (
    <AnimatePresence>
      {open && (
        <motion.div
          className="fixed inset-0 z-50 flex items-center justify-center bg-neutral-100/40 p-6"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.2 }}
          aria-live="polite"
          aria-busy="true"
          role="alertdialog"
          aria-modal="true"
          aria-label={ariaLabel}
        >
          <motion.div
            className="flex w-full max-w-[360px] flex-col items-center justify-center rounded-[10px] border border-neutral-40 bg-neutral-10 p-6"
            initial={{ opacity: 0, y: 12, scale: 0.96 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 12, scale: 0.96 }}
            transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }}
          >
            <div className="flex w-full flex-col items-center gap-4">
              <p className="text-l-medium text-center text-neutral-100">{title}</p>

              <div className="relative h-12 w-20">
                <Image
                  src="/images/login/loading.gif"
                  alt=""
                  fill
                  unoptimized
                  className="object-contain"
                  aria-hidden
                />
              </div>

              <p className="text-m-regular text-center text-neutral-70">{message}</p>
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}