"use client";

import Reporte from "@/components/reporteGraficas/reporte";
import ReportePerifericos from "@/components/reporte_graficas_perifericos/reporte";
import "../../styles/layout/reporte.scss";
import { useState } from "react";


type PreguntaKey = "reporteGraficas" | "reporte_graficas_perifericos";

const LABELS: Record<PreguntaKey, string> = {
  reporteGraficas: "Reporte por equipos",
  reporte_graficas_perifericos: "Reporte por perifericos",
};

export default function Page() {
  const [activeTab, setActiveTab] = useState<PreguntaKey>("reporteGraficas");

  const renderPregunta = () => {
    switch (activeTab) {
      case "reporteGraficas":
        return (
          <>
            <Reporte />
          </>
        );
      case "reporte_graficas_perifericos":
        return (
          <>
            <ReportePerifericos />
          </>
        );
      default:
        return (
          <div className="p-6 text-center text-gray-500">
            Contenido no disponible aún.
          </div>
        );
    }
  };

  return (
    <div className="scanView_reporte">
      <div className="container_reporte">
        <div className="main-content_reporte">
          <div className="tabs_reporte">
            {Object.entries(LABELS).map(([key, label]) => (
              <button
                key={key}
                className={`tab_reporte ${activeTab === key ? "active" : ""}`}
                onClick={() => setActiveTab(key as PreguntaKey)}
                aria-selected={activeTab === key}
                role="tab"
              >
                {label}
              </button>
            ))}
          </div>
          <div className={`data-table_reporte`}>{renderPregunta()}</div>
        </div>
      </div>
    </div>
  );
}
