import { useState } from "react";

const PerfilSelectComponent = ({ dadosPerfis }: { dadosPerfis: any[] }) => {
  const [perfisSelecionados, setPerfisSelecionados] = useState<string[]>([]);

  const handleSelect = (perfilId: string) => {
    if (perfilId === "*") {
      setPerfisSelecionados(["*"]); // Seleciona "Todos" e limpa os outros
    } else {
      const novosPerfis = perfisSelecionados.includes(perfilId)
        ? perfisSelecionados.filter((id) => id !== perfilId) // Remove se já estiver selecionado
        : [...perfisSelecionados.filter((id) => id !== "*"), perfilId]; // Adiciona perfil e remove "Todos"
      setPerfisSelecionados(novosPerfis);
    }
  };

  return (
    <div className="flex flex-col items-center gap-4">
      <div className="flex flex-wrap gap-2 justify-center">
        {/* Card "Todos" */}
        <div
          className={`p-2 px-4 border rounded-lg cursor-pointer ${
            perfisSelecionados.includes("*")
              ? "bg-green-500 text-white"
              : "bg-gray-200"
          }`}
          onClick={() => handleSelect("*")}
        >
          Todos
        </div>

        {/* Cards individuais */}
        {dadosPerfis.map((perfil) => (
          <div
            key={perfil.id_perfil}
            className={`p-2 px-4 border rounded-lg cursor-pointer ${
              perfisSelecionados.includes(perfil.id_perfil)
                ? "bg-blue-500 text-white"
                : "bg-gray-200"
            }`}
            onClick={() => handleSelect(perfil.id_perfil)}
          >
            {perfil.nome_perfil}
          </div>
        ))}
      </div>

      {/* Perfis Selecionados */}
      {perfisSelecionados.length > 0 && (
        <div className="text-sm text-gray-700">
          <strong>Selecionados:</strong>{" "}
          {perfisSelecionados
            .map((id) =>
              id === "*"
                ? "Todos"
                : dadosPerfis.find((p) => p.id_perfil === id)?.nome_perfil
            )
            .join(", ")}
        </div>
      )}
    </div>
  );
};

export default PerfilSelectComponent;