"use client";

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

export default function CheckBoxMesa({
  numAcount,
}: {
  numAcount?: string | null;
}) {
  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" && <SearchMesa />}
    </>
  );
}