"use client";
import { Box } from "@mui/material";
import { GeneralHealthCard } from "../../GeneralHealthCard/GeneralHealthCard";
import { TransactionsWaitingApproval } from "../../TransactionsWaitingApproval/TransactionsWaitingApproval";
import { FetchReport } from "../../FetchReports/FetchReports";
import { Documentation } from "../../Documentation/Documentation";
import { AccountIQ } from "../../AccountIQ/AccountIQ";
import { WhatsNew } from "../../WhatsNew/WhatsNew";
import { TransactionsOverView } from "../../TransactionsOverView/TransactionsOverview";
import { Range } from "react-date-range";

interface IDashboardHomePageProps {
  initialHealthData?: {
    success?: boolean;
    message?: string;
    total?: number;
    successful?: number;
    acceptance_rate?: number;
    amount?: number;
    atv?: number;
  } | null;
  initialStats?: Array<{
    label: string;
    value: string | number;
    change: string;
  }> | null;
  initialDateRange?: Range[];
}

export const DashboardHomePage = ({
  initialHealthData,
  initialStats,
  initialDateRange,
}: IDashboardHomePageProps) => {
  return (
    <>
      {/* Conditional rendering of the Generic Modal, passing LoginModal as children */}
      <Box sx={{ p: 2 }}>
        <GeneralHealthCard
          initialHealthData={initialHealthData}
          initialStats={initialStats}
          initialDateRange={initialDateRange}
        />
      </Box>
      {/* <TransactionsOverView /> */}
      <FetchReport />
      <TransactionsWaitingApproval />
      <Documentation />
      <AccountIQ />
      <WhatsNew />
    </>
  );
};