import * as React from "react";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";

export default function SessionsChart() {
	return (
		<Card
			variant="outlined"
			sx={{
				width: "100%",
				height: "100%",
				backgroundColor: "#F2F2F2",
				p: 2,
			}}
		>
			<CardContent>
				<Typography
					variant="h6"
					align="left"
					color="#202020"
					sx={{
						fontFamily: "Gilroy",
						fontWeight: 500,
						fontSize: "18px",
						lineHeight: "24px",
					}}
				>
					Charging prices
				</Typography>

				{/* Responsive dropdown box */}
				<Box
					sx={{
						mt: 2,
						mb: 2,
						backgroundColor: "#FFFFFF",
						fontSize: "14px",
						lineHeight: "20px",
						width: { xs: "100%" },
						height: "48px",
						display: "flex",
						justifyContent: "space-between",
						alignItems: "center",
						p: 1.5,
						borderRadius: "8px",
						border: "1px solid #454545",
					}}
				>
					<Typography
						sx={{
							fontFamily: "Gilroy",
							fontWeight: 500,
							fontSize: "14px",
							lineHeight: "24px",
							color: "#202020",
							p: "4px",
						}}
					>
						Delhi NCR EV Station
					</Typography>
					<ArrowDropDownIcon sx={{ color: "#202020" }} />
				</Box>

				{/* Grid container for the four boxes */}
				<Box
					sx={{
						display: "grid",
						gridTemplateColumns: {
							xs: "1fr",
							sm: "repeat(2, 1fr)",
						},
						gap: { xs: 1, sm: 2 },
						maxWidth: "750px",
						width: "100%",
						mx: "auto",
					}}
				>
					{/* You can map over your data here; for simplicity, we’re using static boxes */}
					{[1, 2, 3, 4].map((item) => (
						<Box
							key={item}
							sx={{
								height: "84px",
								borderRadius: "8px",
								p: "12px 16px",
								backgroundColor: "#FFFFFF",
								color: "#202020",
							}}
						>
							<Typography
								component="h1"
								variant="body2"
								gutterBottom
							>
								Basic Charging
							</Typography>
							<Typography
								component="h1"
								variant="subtitle2"
								gutterBottom
							>
								16.83 cents/kWh
							</Typography>
						</Box>
					))}
				</Box>
			</CardContent>
		</Card>
	);
}
