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={{ height: "100%", backgroundColor: "#F2F2F2" }}
		>
			<CardContent>
				<Typography
					component="h2"
					variant="subtitle2"
					color="#202020"
					gutterBottom
				>
					{title}
				</Typography>
				<Typography
					component="h1"
					variant="body1"
					color="#202020"
					fontSize={30}
					fontWeight={700}
					gutterBottom
				>
					{value}
				</Typography>
			</CardContent>
		</Card>
	);
}
