type StepIndicatorProps = {
  current: number;
  total: number;
  isComplete: boolean;
};

export default function StepIndicator({
  current,
  total,
  isComplete
}: StepIndicatorProps) {
  const progress = Math.round(((current + 1) / total) * 100);

  return (
    <div className="rounded-3xl border border-slate-200/80 bg-white/80 p-6 shadow-[0_24px_60px_-40px_rgba(15,23,42,0.6)]">
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div>
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
            Progresso
          </p>
          <p className="text-2xl font-semibold text-slate-900">
            {isComplete ? "Concluído" : `Etapa ${current + 1} de ${total}`}
          </p>
        </div>
        <div className="text-right">
          <p className="text-xs uppercase tracking-[0.2em] text-slate-500">
            Avanço
          </p>
          <p className="text-lg font-semibold text-slate-900">
            {isComplete ? "100%" : `${progress}%`}
          </p>
        </div>
      </div>
      <div className="mt-4 h-2 w-full overflow-hidden rounded-full bg-slate-200/70">
        <div
          className="h-full rounded-full bg-gradient-to-r from-slate-900 via-slate-700 to-slate-500 transition-all duration-500"
          style={{ width: `${isComplete ? 100 : progress}%` }}
        />
      </div>
      <div className="mt-4 flex flex-wrap gap-2">
        {Array.from({ length: total }).map((_, index) => {
          const isActive = index === current && !isComplete;
          const isDone = isComplete || index < current;
          return (
            <span
              key={`step-${index}`}
              className={`h-2.5 w-2.5 rounded-full transition-all duration-300 ${
                isDone
                  ? "bg-slate-900"
                  : isActive
                  ? "bg-amber-400"
                  : "bg-slate-200"
              }`}
            />
          );
        })}
      </div>
    </div>
  );
}