import * as React from "react";
import { Box, Typography } from "@mui/material";

export default function Card({ data }) {
  return (
    <Box
      sx={{
        border: "1px solid #C8E1FF",
        p: 3,
        borderRadius: 2,
        color: "#012E6C",
        mb: 2,
      }}
    >
      {data.img && (
        <img
          style={{ marginBottom: "8px" }}
          height="205"
          width="100%"
          src={`https://management.beanstalkedu.com/assets/${data.img}`}
          alt="aKadmy Blogs | Insights, Tips, and Trends for Early Childhood
          Education"
        />
      )}
      <h6>{data.title}</h6>
      <Typography variant="body2" mb={0.6}>
        Published On: {data && data.date} | 5 min Read
      </Typography>
      <Typography variant="body2" sx={{ height: "100px" }}>
        {data.meta_description}
      </Typography>
      <a href={`/blogs/${data.slug}`}>
        <button
          style={{ background: "#012E6C", color: "white", borderRadius: "8px" }}
        >
          <Typography variant="body2">
            Read More&nbsp;
            <img src="/assets/white_right.png" width={"14px"} />
          </Typography>
        </button>
      </a>
    </Box>
  );
}
