
import Grid from "@mui/material/Grid2";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import SessionsChart from "../SessionsChart/sessionChart";
import StatCard, { StatCardProps } from "../StatCard/statCard";
import ResourcesPieChart from "../ResourcePieChart/resourcePieChart";
import RoundedBarChart from "../barChartCard/barChartCard";
import LineChartCard from "../LineChartCard/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={3}
				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>
	);
}
