import React from "react";
import { XCircle, Loader2 } from "lucide-react";

interface ProgressBarProps {
  label: string;
  progressPercent: number;
  isCancellable?: boolean;
  onCancel?: () => void;
  subLabel?: string;
}

export const ProgressBar: React.FC<ProgressBarProps> = ({
  label,
  progressPercent,
  isCancellable = true,
  onCancel,
  subLabel,
}) => {
  return (
    <div className="bg-[#0d1527] border border-[#1b2b4d] rounded-2xl p-4 shadow-md space-y-3">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2.5">
          <Loader2 className="w-4 h-4 text-emerald-400 animate-spin" />
          <span className="text-sm font-bold text-white">{label}</span>
        </div>
        <div className="flex items-center gap-3">
          <span className="text-xs font-mono font-bold text-emerald-300 bg-emerald-950/80 border border-emerald-800/60 px-2 py-0.5 rounded-full">
            {Math.round(progressPercent)}%
          </span>
          {isCancellable && onCancel && (
            <button
              onClick={onCancel}
              className="text-xs flex items-center gap-1 text-slate-400 hover:text-rose-400 font-medium px-2 py-1 rounded-lg hover:bg-rose-950/40 transition-colors cursor-pointer"
              title="Cancel operation"
            >
              <XCircle className="w-3.5 h-3.5" />
              Cancel
            </button>
          )}
        </div>
      </div>

      <div className="w-full bg-[#111d38] rounded-full h-2.5 overflow-hidden">
        <div
          className="bg-gradient-to-r from-blue-600 via-teal-500 to-emerald-500 h-2.5 rounded-full transition-all duration-300 ease-out shadow-xs shadow-emerald-500/50"
          style={{ width: `${Math.min(100, Math.max(0, progressPercent))}%` }}
        />
      </div>

      {subLabel && (
        <p className="text-xs text-slate-400 italic flex items-center justify-between">
          <span>{subLabel}</span>
          <span className="text-[11px] text-emerald-400 font-mono">Offline CP-SAT engine</span>
        </p>
      )}
    </div>
  );
};