"use client";
import { useTranslation } from "react-i18next";
import { ThemeProvider } from "@mui/material/styles";
import theme from "../../theme";
import { TabsProps } from "@mui/material/Tabs";
import React, { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Card, CardContent, CardHeader, Grid } from "@mui/material";
import DashboardProgressChart from "../DashboardProgressChart/DashboardProgressChart";
import DashboardLineChart from "../DashboardLineChart/DashboardLineChart";

type Props = {};

const DashboardPage: React.FC<Props> = ({}) => {
  const { t } = useTranslation("dashboard");
  const router = useRouter();

  return (
    <ThemeProvider theme={theme}>
      <>
        <Grid container>
          <Grid item xs={12}>
            <Card>
              <CardHeader
                title={t("Progress chart")}
              />
              <CardContent>
                <DashboardProgressChart />
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12}>
            <Card>
              <CardHeader  
                title={t("Line chart")} 
              />
              <CardContent>
                <DashboardLineChart />
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </>
    </ThemeProvider>
  );
};

export default DashboardPage;