frontend/src/components/progressbar.tsx

import { Fragment } from "react";
import { CheckIcon, FileTextIcon } from "lucide-react";

interface ProgressBarProps {
  currentStep: number;
}

export function ProgressBar({ currentStep }: ProgressBarProps) {
  const steps = [
    { label: "Upload", index: 0 },
    { label: "Analyze", index: 1 },
    { label: "Report", index: 2 },
  ];

  return (
    <div className="bg-white px-8 py-6 border-b border-gray-200">
      <div className="max-w-2xl mx-auto flex items-center justify-center">
        {steps.map((step, index) => (
          <Fragment key={step.label}>
            <div className="flex flex-col items-center">
              {/* Step circle */}
              <div
                className={`w-12 h-12 rounded-full flex items-center justify-center text-white font-semibold transition-all duration-300 ${
                  currentStep > step.index
                    ? "bg-gradient-to-r from-blue-800 to-teal-600"
                    : currentStep === step.index
                    ? "bg-gradient-to-r from-blue-600 to-teal-500"
                    : "bg-gray-300 text-gray-600"
                }`}
              >
                {currentStep > step.index ? (
                  <CheckIcon className="w-6 h-6" />
                ) : step.index === 2 ? (
                  <FileTextIcon className="w-6 h-6" />
                ) : (
                  <span>{index + 1}</span>
                )}
              </div>

              {/* Label */}
              <span className="mt-2 text-sm font-medium text-gray-700">
                {step.label}
              </span>
            </div>

            {/* Connecting line */}
            {index < steps.length - 1 && (
              <div
                className={`h-1 w-32 mx-4 rounded-full transition-all duration-300 ${
                  currentStep > step.index
                    ? "bg-gradient-to-r from-blue-800 to-teal-600"
                    : "bg-gray-300"
                }`}
              />
            )}
          </Fragment>
        ))}
      </div>
    </div>
  );
}