import * as React from "react";
import { useTheme } from "@mui/material/styles";
import {
	BarChart,
	Bar,
	XAxis,
	YAxis,
	CartesianGrid,
} from "recharts";
import {
	Card,
	CardContent,
	Typography,
	Box,
	
} from "@mui/material";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
const data = [
	{ name: "Jan", v1: 40 },
	{ name: "Feb", v1: 50 },
	{ name: "Mar", v1: 80 },
	{ name: "Apr", v1: 20 },
	{ name: "May", v1: 60 },
	{ name: "Jun", v1: 30 },
];

export default function RoundedBarChart() {
	const theme = useTheme();

	return (
		<Card
			variant="outlined"
			sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
		>
			<CardContent>
				<div
					style={{
						display: "flex",
						alignItems: "center",
						color: "#F2F2F2",
					}}
				>
					<Typography
						variant="h6"
						align="left"
						color="#F2F2F2"
						sx={{
							fontFamily: "Gilroy",
							fontWeight: 500,
							fontSize: "18px",
							lineHeight: "24px",
						}}
					>
						Charge Stats
					</Typography>
					<Box
						sx={{
							mt: 2,
							mb: 2,
							backgroundColor: "#202020",
							marginLeft: "auto",
							marginRight: "16px",
							display: "flex",
							justifyContent: "space-between",
							alignItems: "center",
							p: 1.5,
							borderRadius: "8px",
							border: "1px solid #454545",

							padding: "4px 8px",
							color: "#F2F2F2",
						}}
					>
						<Typography
							sx={{
								fontFamily: "Gilroy",
								fontWeight: 500,
								fontSize: "14px",
								lineHeight: "24px",
								color: "#F2F2F2",
								p: "4px",
							}}
						>
							Monthly
						</Typography>
						<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
					</Box>
				</div>
				<BarChart
					width={600}
					height={300}
					data={data}
					margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
					style={{ width: "100%", height: "auto" }}
				>
					<CartesianGrid vertical={false} />
					<XAxis />
					<YAxis tickFormatter={(value) => `${value}`} />

					<Bar dataKey="v1" fill="skyblue" radius={[10, 10, 0, 0]} />
					<Bar dataKey="v2" fill="skyblue" radius={[10, 10, 0, 0]} />
				</BarChart>
			</CardContent>
		</Card>
	);
}