"use client";

import { useState } from "react";
import SearchUser from "./Global/SearchUser/searchUser";
import SearchBoxEquipo from "./SearchEquipo";
import Information from "./Global/Information/information";

interface props {
  numAcount: string | null;
  student: {
    id_cuenta: number;
    nombre: string;
    carrera:{
      carrera:string;
    }
  };
}

export default function CheckBoxMesa({ numAcount, student }: props) {
  const [modo, setModo] = useState<"Mesa" | "Cuenta" | null>(null);

  return (
    <>
      <div className="radio-grid">
        <label className="radio-card">
          <input
            type="radio"
            name="modo"
            checked={modo === "Mesa"}
            onChange={() => setModo("Mesa")}
          />
          <span className="radio-ui"></span>
          <span className="radio-text">Mesa</span>
        </label>

        <label className="radio-card">
          <input
            type="radio"
            name="modo"
            checked={modo === "Cuenta"}
            onChange={() => setModo("Cuenta")}
          />
          <span className="radio-ui"></span>
          <span className="radio-text">Cuenta</span>
        </label>
      </div>

      {modo === "Cuenta" && <SearchUser value={numAcount ?? null} />}
      {modo === "Mesa" && <SearchBoxEquipo />}

      {student && (
        <Information NoCuenta={student.id_cuenta} nombre={student.nombre} carrera={student.carrera?.carrera}/>
      )}
    </>
  );
}