import Toggle from "@/app/Components/Global/Toggle/Toggle";
import MachineTable from "./MachineTable";
import styles from "./Page.module.css";
import MachineTableActive from "./MachineTableActive";
import DSC from "./DSC";
import ToggleTable from "@/app/Components/Global/Toggle/ToggleTable";

export default async function Page(props: {
  searchParams?: Promise<{ numAcount: string; key: string }>;
}) {
  const params = await props.searchParams;
  const numAcount = params?.numAcount ?? null;
  const key = params?.key ?? "active";

  return (
    <section className="containerSection">
      <h2 className="title">MONITOR DE MÁQUINAS</h2>

      <div className={styles.actions}>
        <button className={styles.resetButton}>Actualizar información</button>
      </div>
      <ToggleTable
        defaultView={key}
        options={[
          {
            key: "active",
            label: "Disponibles",
            content: (
              <>
                <MachineTableActive />
              </>
            ),
          },
          {
            key: "disable",
            label: "No Disponibles",
            content: (
              <>
                <MachineTable />
              </>
            ),
          },
        ]}
      />
    </section>
  );
}