import React from "react";
import { Card, Typography } from "@mui/material";

function CustomCard(props) {
  const { title, value, imageUrl } = props;

  return (
    <Card
      style={{
        backgroundImage: `linear-gradient(to bottom right, #0000ff, #00ffff), url(${imageUrl})`,
        backgroundSize: "cover",
        color: "#FFFFFF",
        position: "relative",
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 10,
        paddingRight: 10,
      }}
    >
      {/* This content will be po sitioned on top of the image */}
      <Typography
        variant="h5"
        textAlign={"center"}
        fontWeight={"bold"}
        component="h2"
        sx={{
          fontSize: { xs: "1rem", lg: "1.5rem" },
          fontWeight: "bold",
          color: "white",
          textAlign: "center",
          textTransform: "uppercase",
        }}
      >
        {title}
      </Typography>
      <Typography
        color="white"
        textAlign={"center"}
        style={{
          border: "1px dashed #ddd",
          marginTop: "10px",
          padding: "4px",
          borderRadius: "4px",
        }}
        sx={{
          fontSize: { xs: "0.8rem", lg: "1rem" },
        }}
      >
        {value}
      </Typography>
    </Card>
  );
}

export default CustomCard;
