import { ConsultationStage } from "@/data/consultations";

const stages: { key: ConsultationStage; label: string }[] = [
  { key: "zbieranie", label: "Konsultacja" },
  { key: "analiza", label: "Opracowanie" },
  { key: "wnioski", label: "Wnioski" },
  { key: "dzialania", label: "Działania" },
];

const order: Record<ConsultationStage, number> = {
  zbieranie: 0,
  analiza: 1,
  wnioski: 2,
  dzialania: 3,
  zamknieta: 99,
};

export default function StageBar({ stage }: { stage: ConsultationStage }) {
  const current = order[stage];

  return (
    <div className="rounded-2xl border p-5">
      <p className="font-semibold mb-3">Etap</p>

      <div className="flex flex-wrap items-center gap-2 text-sm font-medium">
        {stages.map((s, idx) => {
          const done = idx < current;
          const active = idx === current;
          return (
            <div key={s.key} className="flex items-center gap-2">
              <span
                className={[
                  "rounded-full px-3 py-1 border",
                  active ? "bg-gray-900 text-white border-gray-900" : "",
                  done ? "bg-gray-100 text-gray-600" : "",
                  !active && !done ? "bg-white" : "",
                ].join(" ")}
              >
                {s.label}
              </span>
              {idx < stages.length - 1 && <span className="text-gray-400">→</span>}
            </div>
          );
        })}
      </div>

      {stage === "zamknieta" && (
        <p className="mt-4 text-sm text-gray-600">
          Konsultacja zamknięta — trwa porządkowanie materiału lub publikacja wyników.
        </p>
      )}
    </div>
  );
}