'use client';

import IndicateurCard from "./IndicateurAccompagnementCard";

export default function IndicateurList({ indicateurs, selectedIndicateur,
  setSelectedIndicateur, setIsCreatingIndicateur, setIndicateurForm }: any) {
  return (
    <div className="bg-white rounded-xl shadow-sm p-4 flex flex-col">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-semibold text-[#1f5f4a]">Indicateurs d'accompagnement</h2>

      </div>
      <button
        onClick={() => {
          setSelectedIndicateur(null);
          setIsCreatingIndicateur(true);

          setIndicateurForm({
            id: null,
            libelle: ""
          });
        }
        }
        className="inline-flex items-center gap-2 mb-2
      px-5 py-1
      rounded-xl
      bg-gradient-to-r from-[#2f7d5f] to-[#3f9b74]
      text-white font-semibold
      shadow-md
      transition-all
      hover:-translate-y-0.5
      hover:shadow-lg
      cursor-pointer
      ">
        + Ajouter
      </button>

      {indicateurs.length < 1 && (
        <div className="border rounded-xl p-4 flex items-center justify-center text-gray-400">
          Aucun indicateur renseigné
        </div>
      )}

      <div className="space-y-1 overflow-y-auto">
        {indicateurs.map((indicateur: any) => (
          <IndicateurCard
            key={indicateur.id}
            indicateur={indicateur}
            onClick={() => setSelectedIndicateur(indicateur)}
            className={`${selectedIndicateur?.id === indicateur.id
              ? "bg-green-100 border border-green-600"
              : "bg-gray-50"
              }`}
          />
        ))}
      </div>
    </div>
  );
}