"use client";
// @/components/main/settingsPageComponents/modals/ProgressModal.tsx
import React from "react";

type Props = {
  visible: boolean;
  progress: number;
  slot?: number;
};

const ProgressModal: React.FC<Props> = ({ visible, progress, slot }) => {
  if (!visible) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 ">
  <div className="p-6 rounded shadow-sm text-center w-80 bg-[var(--color-surface)] dark:bg-[var(--color-surface)] text-[var(--color-fg)] border border-[var(--color-border)]">
        {/* 
                <h2 className="text-lg font-bold mb-4">
          Firmwareupdate
          {typeof slot === "number" ? ` KÜ ${slot}` : ""} läuft ...
        </h2>
        */}
        <h2 className="text-lg font-bold mb-4">
          Firmwareupdate läuft ...
          {typeof slot === "number" ? ` ` : ""}
        </h2>
        Bitte Fenster nicht schließen
        <h2></h2>
        <div className="w-full h-4 rounded-full bg-[var(--color-surface-alt)]/80 dark:bg-[var(--color-surface-alt)]/30 border border-[var(--color-border)] overflow-hidden">
          <div
            className="h-full rounded-full transition-all duration-200 bg-[var(--color-accent)]"
            style={{ width: `${progress}%` }}
          ></div>
        </div>
        <p className="mt-4 text-sm">{Math.round(progress)}% abgeschlossen</p>
      </div>
    </div>
  );
};

export default ProgressModal;