"use client";
// components/main/kabelueberwachung/kue705FO/modals/SuccessProgressModal.tsx
import React, { useEffect, useState } from "react";

interface Props {
  visible: boolean;
  duration?: number; // in Sekunden
  onClose: () => void;
}

const SuccessProgressModal: React.FC<Props> = ({
  visible,
  duration = 10,
  onClose,
}) => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    if (!visible) return;
    setProgress(0);
    const interval = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval);
          setTimeout(onClose, 500); // Schließen nach kurzer Verzögerung
          return 100;
        }
        return prev + 100 / duration;
      });
    }, 1000);

    return () => clearInterval(interval);
  }, [visible, duration, onClose]);

  if (!visible) return null;

  return (
    <div className="fixed inset-0 z-50 bg-black bg-opacity-40 flex items-center justify-center">
      <div className="bg-white p-6 rounded-lg shadow-md text-center w-72">
        <h2 className="text-lg font-bold text-green-600 mb-4">
          ✅ Firmwareupdate erfolgreich abgeschlossen.
        </h2>
        <div className="w-full bg-gray-200 rounded h-3 overflow-hidden">
          <div
            className="h-3 bg-green-500 transition-all duration-100"
            style={{ width: `${progress}%` }}
          ></div>
        </div>
        <p className="text-sm mt-2">{Math.floor(progress)}%</p>
      </div>
    </div>
  );
};

export default SuccessProgressModal;