"use client";
import { FC, lazy, Suspense, useState } from "react";
import { ReportMenus } from "./report-menus";

const componentMap = {
  InvoiceReport: lazy(() => import("./invoice-report")),
  ExpenseReport: lazy(() => import("./expense-report")),
  IncomeExpense: lazy(() => import("./income-expense")),
};

const Reports: FC = () => {
  const [selectedComponent, setSelectedComponent] = useState("IncomeExpense");
  const SelectedComponent = componentMap[selectedComponent] || null;
  return (
    <>
      <div className="flex">
        <div className="max-w-[300px] bg-gray-50 h-[80vh] py-10">
          <ReportMenus onComponentSelect={setSelectedComponent} />
        </div>
        <div className="py-2 px-5 mt-2 container">
          <Suspense fallback={<p className="text-gray-500">Loading...</p>}>
            {SelectedComponent ? (
              <SelectedComponent />
            ) : (
              <p className="text-gray-500">
                Select a component from the sidebar
              </p>
            )}
          </Suspense>
        </div>
      </div>
    </>
  );
};

export default Reports;