import * as React from "react";
import { useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Chip from "@mui/material/Chip";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import { SparkLineChart } from "@mui/x-charts/SparkLineChart";
import { areaElementClasses } from "@mui/x-charts/LineChart";

export type StatCardProps = {
	title: string;
	value: string;
};

export default function StatCard({ title, value }: StatCardProps) {
	return (
		<Card
			variant="outlined"
			sx={{
				width: "264.5px",
				height: "90px",
				padding: "16px",
				borderRadius: "12px",
				gap: "24px",
				"*:where([data-mui-color-scheme='dark']) &": {
					backgroundColor: "#202020",
				},
			}}
		>
			<CardContent>
				<Typography
					component="h2"
					variant="subtitle2"
					color="#F2F2F2"
					width={"118px"}
					height={"14px"}
					fontWeight={400}
					fontSize={"12px"}
					lineHeight={"14px"}
					letterSpacing={"0%"}
					gutterBottom
				>
					{title}
				</Typography>
				<Typography
					component="h1"
					variant="body1"
					color="#F2F2F2"
					width={"36px"}
					height={"36px"}
					fontSize={"32px"}
					fontWeight={600}
					lineHeight={"36px"}
					letterSpacing={"0%"}
					gutterBottom
				>
					{value}
				</Typography>
			</CardContent>
		</Card>
	);
}
