const TOTAL_ETAPES = 5

const LABELS_ETAPES = [
  "Métier",
  "Description",
  "Conditions",
  "Profil",
  "Publication",
]

interface Props {
  etape: number
}

export default function BarreProgression({ etape }: Props) {

  const pourcentage = Math.round((etape / TOTAL_ETAPES) * 100)

  return (
    <div className="mb-8">

      {/* Titre + compteur */}
      <div className="flex items-center justify-between mb-4">
        <div>
          <h2 className="text-2xl font-black text-gray-900 dark:text-white">
            {LABELS_ETAPES[etape - 1]}
          </h2>
          <p className="text-gray-500 text-sm">
            Étape {etape} sur {TOTAL_ETAPES}
          </p>
        </div>
        <span className="text-sm font-bold text-primary">
          {pourcentage}% complété
        </span>
      </div>

      {/* Barre de progression */}
      <div className="w-full bg-gray-200 dark:bg-gray-800 h-2.5 rounded-full overflow-hidden">
        <div
          className="bg-primary h-full rounded-full transition-all duration-500"
          style={{ width: `${pourcentage}%` }}
        />
      </div>

      {/* Points d'étapes */}
      <div className="flex justify-between mt-3">
        {LABELS_ETAPES.map((label, index) => {
          const num = index + 1
          const estActuelle = num === etape
          const estTerminee = num < etape
          return (
            <div key={label} className="flex flex-col items-center gap-1">
              <div
                className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold transition-all ${
                  estTerminee
                    ? "bg-primary text-white"
                    : estActuelle
                    ? "bg-primary text-white ring-4 ring-primary/20"
                    : "bg-gray-200 dark:bg-gray-700 text-gray-400"
                }`}
              >
                {estTerminee ? "✓" : num}
              </div>
              <span
                className={`text-xs hidden sm:block ${
                  estActuelle
                    ? "text-primary font-semibold"
                    : "text-gray-400"
                }`}
              >
                {label}
              </span>
            </div>
          )
        })}
      </div>

    </div>
  )
}