"use client";

import { useState } from "react";
import "./Selection.css";

function Selection({
  plataformasInscritas = [],
  onSelect,
}: {
  plataformasInscritas: string[];
  onSelect: (plataforma: string | null) => void;
}) {
  const [selected, setSelected] = useState<string | null>(null);

  const handleSelect = (optionName: string) => {
    const value = selected === optionName ? null : optionName;
    setSelected(value);
    onSelect(value);
  };
  const options = [
    {
      name: "WINDOWS",
      img: "https://images.icon-icons.com/2235/PNG/512/windows_os_logo_icon_134678.png",
    },
    {
      name: "MACINTOSH",
      img: "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
    },
    {
      name: "PROFESORES",
      img: "https://cdn-icons-png.flaticon.com/512/3135/3135715.png",
    },
  ];

  const opcionesDisponibles = options.filter(
    (option) => !plataformasInscritas.includes(option.name),
  );

  return (
    <section className="selection">
      {opcionesDisponibles.map((option, index) => (
        <div
          key={index}
          className="selectionItem"
          onClick={() => handleSelect(option.name)}
        >
          <button
            className={`buttonSelection ${
              selected === option.name ? "active" : ""
            }`}
          >
            <img
              src={option.img}
              alt={option.name.toLowerCase()}
              height={30}
              width={30}
            />
          </button>
          <span className="buttonLabel">{option.name}</span>
        </div>
      ))}

      {opcionesDisponibles.length === 0 && (
        <p style={{ opacity: 0.6 }}>
          El alumno ya está inscrito en todas las plataformas
        </p>
      )}
    </section>
  );
}

export default Selection;