import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";

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

export default function StatCard({ title, value }: StatCardProps) {
  const theme = useTheme();
  const isXsScreen = useMediaQuery(theme.breakpoints.only("xs"));
  const isSmScreen = useMediaQuery(theme.breakpoints.only("sm"));
  const isMdScreen = useMediaQuery(theme.breakpoints.only("md"));
  
  return (
    <Card
      variant="outlined"
      sx={{
        width: "100%", 
        height: "100px", 
        padding: {
          xs: "12px",
          sm: "14px",
          md: "10px"
        },
        borderRadius: "12px",
        border: "none",
        gap: "24px",
        "*:where([data-mui-color-scheme='dark']) &": {
          backgroundColor: "#202020",
        },
      }}
    >
      <CardContent
        sx={{
          padding: {
            xs: "8px",
            sm: "12px",
            md: "16px"
          },
          "&:last-child": {
            paddingBottom: {
              xs: "8px",
              sm: "12px", 
              md: "16px"
            }
          }
        }}
      >
        <Typography
          component="h2"
          variant="subtitle2"
          color="#F2F2F2"
          sx={{
            fontWeight: 400,
            fontSize: {
              xs: "10px",
              sm: "11px",
              md: "12px"
            },
            lineHeight: {
              xs: "12px",
              sm: "13px",
              md: "14px"
            },
            letterSpacing: "0%",
            width: "auto", 
            height: "auto", 
            marginBottom: { xs: "6px", sm: "8px", md: "10px" }, // Added more spacing

          }}
          gutterBottom
        >
          {title}
        </Typography>
        <Typography
          component="h1"
          variant="body1"
          color="#D9D8D8"
          sx={{
            fontWeight: 600,
            fontSize: {
              xs: "24px",
              sm: "28px",
              md: "32px"
            },
            lineHeight: {
              xs: "28px",
              sm: "32px",
              md: "36px"
            },
            letterSpacing: "0%",
            width: "auto", 
            height: "auto", 
          }}
          gutterBottom
        >
          {value}
        </Typography>
      </CardContent>
    </Card>
  );
}