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: "553px",
				height: "324px",
				gap: "16px",
				borderRadius: "16px",
				padding: "20px",
				"*:where([data-mui-color-scheme='dark']) &": {
					backgroundColor: "#202020",
				},
				
			}}
		>
			<CardContent>
				<Typography
					variant="h6"
					align="left"
					color="#F2F2F2"
					width="132px"
					height="24px"
					gap={"12px"}
					sx={{
						fontFamily: "Gilroy",
						fontWeight: 500,
						fontSize: "18px",
						lineHeight: "24px",
						letterSpacing: "0%",
						color: "#FAFAFA",
					}}
				>
					Charging prices
				</Typography>

				{/* Responsive dropdown box */}
				<Box
					sx={{
						mt: 2,
						mb: 2,
						backgroundColor: "#202020",
						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
						width="134px"
						height="24px"
						sx={{
							fontFamily: "Gilroy",
							fontWeight: 500,
							fontSize: "14px",
							lineHeight: "24px",
							color: "#D9D8D8",
							
						}}
					>
						Delhi NCR EV Station
					</Typography>
					<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
				</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",
					}}
				>
					{[1, 2, 3, 4].map((item) => (
						<Box
							key={item}
							sx={{
								height: "84px",
								borderRadius: "8px",
								p: "12px 16px",
								backgroundColor: "#272727",
								color: "#D9D8D8",
							}}
						>
							<Typography
								component="h1"
								variant="body2"
								width="98px"
								height="24px"
								fontWeight={400}
								fontSize={"14px"}
								lineHeight={"24px"}
								gutterBottom
							>
								Basic Charging
							</Typography>
							<Box display={"flex"} gap={1}>
								<Typography
									component="h1"
									variant="subtitle2"
									color="#FFFFFF"
									width="40px"
									height={"24px"}
									fontWeight={500}
									fontSize="18px"
									lineHeight="24px"
									gutterBottom
								>
									16.83
								</Typography>

								<Typography
									width="71px"
									height="24px"
									gap="2px"
									fontWeight={400}
									fontSize={"14px"}
									lineHeight={"24px"}
								>
									cents/kWh
								</Typography>
							</Box>
						</Box>
					))}
				</Box>
			</CardContent>
		</Card>
	);
}
