import * as React from "react";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";

import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import { useRouter as useNextRouter } from "next/router";
import NextLink from "next/link";

export default function ExampleCard(props: {
  topic: string;
  title: string | React.ReactNode;
  icon?: React.ReactNode;
  id: string;
  disableBoldTitle?: boolean;
}) {
  const { topic, title, icon, id, disableBoldTitle } = props;

  return (
    <NextLink href={`/${topic}/${id}`}>
      <Card
        sx={{
          minWidth: 275,
          boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.1)",
          borderRadius: "6px",
          cursor: "pointer",
          border: "1px solid transparent",

          "&:hover": {
            border: "1px solid #0F8CFF",
            // boxShadow: "0 0 0 1px rgba(15,140,255,1)",

            "& .MuiCardActions-root": {
              // backgroundColor: "#0F8CFF",
              // color: "#fff",
              "& .MuiSvgIcon-root": {
                color: "#0F8CFF",
              },
            },
            ...(!disableBoldTitle && {
              "& .MuiTypography-root": {
                fontWeight: 600,
              },
            }),
          },
        }}
      >
        <CardContent>
          {typeof title === "string" ? (
            <Typography
              sx={{
                fontSize: 24,
                fontWeight: 500,
              }}
              color="text.primary"
              textAlign="center"
              component="div"
              gutterBottom
            >
              {title}
            </Typography>
          ) : (
            title
          )}
          <Box
            sx={{
              width: "100%",
              backgroundColor: "#F3F6F9",
              padding: (theme) => theme.spacing(2),
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              color: "transparent",
            }}
          >
            {icon}
          </Box>
        </CardContent>
        <CardActions>
          <ChevronRightIcon
            sx={{
              marginLeft: "auto",
              width: "2rem",
              height: "2rem",
            }}
          />
        </CardActions>
      </Card>
    </NextLink>
  );
}