"use client";

import Toggle from "@/app/Components/Global/Toggle/Toggle";
import Equipos from "@/app/Components/Equipos/equipos";
import ProgramSelector from "@/app/Components/InformacionEquipos/ProgramSelector";
import SelectorSala from "@/app/Components/InformacionEquipos/SelectorSala";
import SelectorEquipo from "@/app/Components/InformacionEquipos/SelectorEquipo";

import { useState } from "react";

import "./informacionequipo.css";
    
export default function InformacionEquipo({
  defaultKey,
}: {
  defaultKey?: string;
}) {
  const [id, setId] = useState<number | null>(null);
  const [ubicacion, setUbicacion] = useState<string | null>(null);

  return (
    <section className="containerSection">
      <h2 className="title"> INFORMACION DE EQUIPOS </h2>

      <Toggle
        defaultView={defaultKey}
        options={[
          {
            key: "Equipos",
            label: "Equipos",
            content: <Equipos />,
          },
          {
            key: "Equipo",
            label: "Programa por equipo",
            content: (
              <>
                <SelectorEquipo
                  onSearch={(sala) => {
                    setUbicacion(sala);
                  }}
                />
                <ProgramSelector key={1} ubicacion={ubicacion} />,
              </>
            ),
          },
          {
            key: "Sala",
            label: "Programa por sala",
            content: (
              <>
                <SelectorSala
                  onSearch={(sala) => {
                    setId(sala);
                  }}
                />
                <ProgramSelector key={2} id={id} />
              </>
            ),
          },
        ]}
      />
    </section>
  );
}
//IO
