"use client";

import React from "react";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

const STEPS = [
  { label: "Choose Plan", icon: "📋" },
  { label: "Organization", icon: "🏢" },
  { label: "Your Details", icon: "👤" },
  { label: "Payment", icon: "💳" },
  { label: "All Done!", icon: "🎉" },
];

export default function ProgressBar({
  currentStep,
  totalSteps,
}: {
  currentStep: number;
  totalSteps: number;
}) {
  return (
    <div className="max-w-3xl mx-auto mb-10 px-4">
      <div className="flex items-center justify-between relative">
        {/* Connector line */}
        <div className="absolute top-5 left-0 right-0 h-0.5 bg-gray-200 -z-0" />
        <div
          className="absolute top-5 left-0 h-0.5 bg-blue-500 -z-0 transition-all duration-500"
          style={{ width: `${((currentStep - 1) / (totalSteps - 1)) * 100}%` }}
        />

        {STEPS.map((step, i) => {
          const stepNum = i + 1;
          const done = stepNum < currentStep;
          const active = stepNum === currentStep;
          return (
            <div key={i} className="flex flex-col items-center gap-2 z-10">
              <div
                className={cn(
                  "w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-all duration-300",
                  done
                    ? "bg-blue-500 border-blue-500 text-white"
                    : active
                      ? "bg-white border-blue-500 text-blue-600 shadow-lg shadow-blue-100"
                      : "bg-white border-gray-200 text-gray-400",
                )}
              >
                {done ? (
                  <Check className="w-5 h-5" />
                ) : (
                  <span>{step.icon}</span>
                )}
              </div>
              <span
                className={cn(
                  "text-xs font-semibold hidden sm:block text-center max-w-16",
                  active
                    ? "text-blue-600"
                    : done
                      ? "text-gray-700"
                      : "text-gray-400",
                )}
              >
                {step.label}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}