import * as React from "react";
import Grid from "@mui/material/Grid2";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import Copyright from "../../pages/Dashboard/internals/components/Copyright";
import ChartUserByCountry from "../ChartUserByCountry";
import CustomizedTreeView from "../CustomizedTreeView";
import CustomizedDataGrid from "../CustomizedDataGrid";
import HighlightedCard from "../HighlightedCard";
import PageViewsBarChart from "../PageViewsBarChart";
import SessionsChart from "../SessionsChart";
import StatCard, { StatCardProps } from "../StatCard";
import ResourcesPieChart from "../ResourcePieChart";
import { BarChart } from "@mui/icons-material";
import RoundedBarChart from "../barChartCard";
import { LineHighlightPlot } from "@mui/x-charts";
import LineChartCard from "../LineChartCard";

const data: StatCardProps[] = [
	{
		title: "Total Charge Stations",
		value: "86",
	},
	{
		title: "Charging Completed",
		value: "12",
	},
	{
		title: "Active Users",
		value: "24",
	},
	{
		title: "Total Energy Consumed",
		value: "08",
	},
];

export default function MainGrid() {
	return (
		<Box sx={{ width: "100%", maxWidth: { sm: "100%", md: "1700px" } }}>
			{/* cards */}
			<Typography component="h2" variant="h6" sx={{ mb: 2 }}>
				Dashboard
			</Typography>
			<Grid
				container
				spacing={2}
				columns={12}
				
				sx={{ mb: (theme) => theme.spacing(2) }}
			>
				{data.map((card, index) => (
					<Grid key={index} size={{ xs: 12, sm: 6, lg: 3 }}>
						<StatCard {...card} />
					</Grid>
				))}

				<Grid size={{ xs: 12, md: 6 }}>
					<SessionsChart />
				</Grid>
				<Grid size={{ xs: 12, md: 6 }}>
					<ResourcesPieChart />
				</Grid>
				<Grid size={{ xs: 12, md: 6 }}>
					<RoundedBarChart />
				</Grid>
				<Grid size={{ xs: 12, md: 6 }}>
					<LineChartCard />
				</Grid>
			</Grid>
		</Box>
	);
}
