import * as React from "react";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Unstable_Grid2";
import Box from "@mui/material/Box";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";

export function HomeCardContainer(props: { children: React.ReactNode }) {
  const { children } = props;

  return (
    <Grid container spacing={3} py={(theme) => theme.spacing(3)}>
      {children}
    </Grid>
  );
}

const getLinearGradient = (type?: "mysql" | "clickhouse" | "htap") => {
  switch (type) {
    case "mysql":
      return "linear-gradient(90deg, #156982 23.5%, #ED872B 69.66%)";
    case "clickhouse":
      return "linear-gradient(89.96deg, #FCA92E 18.93%, #FA0A1A 113.15%)";
    case "htap":
      return "linear-gradient(90deg, #FF0000 0%, #08001A 100%)";
    default:
      return "linear-gradient(90deg, #65DD71 0%, #087DE9 100%)";
  }
};

export function HomeCard(props: {
  label: string;
  title: string | React.ReactNode;
  list: string[] | React.ReactNode[];
  diffContent?: {
    title: string;
    list: string[] | React.ReactNode[];
  };
  type?: "mysql" | "clickhouse" | "htap";
  showMoreIcon?: boolean;
}) {
  const { label, title, list, diffContent, type, showMoreIcon } = props;

  return (
    <>
      <Grid xs={12} md={6} lg={4}>
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            flexDirection: "column",
            height: "100%",
          }}
        >
          <Typography
            component="div"
            fontWeight={600}
            fontSize="24px"
            sx={{
              background: getLinearGradient(type),
              backgroundClip: "text",
              textFillColor: "transparent",
              py: 1.5,
              width: "fit-content",
            }}
          >
            {label}
          </Typography>
          <Box
            sx={{
              px: 3,
              py: 2,
              bgcolor: "background.paper",
              borderRadius: 1.5,
              border: "1px solid #E1E1E1",
              height: "100%",
            }}
          >
            <Typography
              component="div"
              gutterBottom
              fontWeight={600}
              fontSize="16px"
            >
              {title}
            </Typography>
            <Box component="ul">
              {list.map((item, idx) => (
                <Typography
                  component="li"
                  key={typeof item === "string" ? item : `${idx}-item`}
                  fontWeight={500}
                  fontSize="14px"
                  className="homecard-list-item"
                >
                  {item}
                </Typography>
              ))}
            </Box>
            {diffContent && (
              <>
                <Typography
                  component="div"
                  gutterBottom
                  fontWeight={600}
                  fontSize="16px"
                >
                  {diffContent.title}
                </Typography>
                <Box component="ul">
                  {diffContent.list.map((item, idx) => (
                    <Typography
                      component="li"
                      key={typeof item === "string" ? item : `${idx}-item`}
                      fontWeight={500}
                      fontSize="14px"
                      className="homecard-list-item"
                    >
                      {item}
                    </Typography>
                  ))}
                </Box>
              </>
            )}
            {showMoreIcon && (
              <MoreHorizIcon
                fontSize="large"
                sx={{
                  color: "#D9D9D9",
                  // ml: "10px",
                }}
              />
            )}
          </Box>
        </Box>
      </Grid>
    </>
  );
}