import * as React from "react";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Unstable_Grid2"; // Grid version 2
import DiamondIcon from "@mui/icons-material/Diamond";

import Layout from "@/components/Layout2";
import { config as navCfg } from "@/components/Layout2/_config";
import {
  cards1 as cardsCfg1,
  cards2 as cardsCfg2,
} from "@/components/Sections/MysqlCompatible/_config";
import ExampleCard from "@/components/Sections/Common/Card";
import * as styles from "@/components/Sections/RealTimeAnalytics/style.module.css";
import { SQLTextIcon } from "@/components/Sections/MysqlCompatible/Icons";
import { MySQLCompatibleUTMBtn } from "@/components/Button/UTMButton";

const TOPIC_ID = "mysql-compatibility";
const SEOMeta = {
  title: "MySQL Compatibility",
};

export default function MysqlCompatible() {
  return (
    <Layout
      navItems={navCfg.nav}
      navitemSelected={TOPIC_ID}
      mainClass={(styles as any).bg_hexagon}
      meta={SEOMeta}
    >
      <Grid container spacing={2}>
        <>
          <Grid xs={12}>
            <Typography
              fontSize="16px"
              fontWeight={600}
              display="inline-flex"
              gap={1}
            >
              <SQLTextIcon sx={{ color: "transparent" }} /> Standard CRUD
            </Typography>
          </Grid>
          {cardsCfg1.map((card) => (
            <Grid xs={12} md={4} lg={3} key={card.id}>
              <ExampleCard
                topic={TOPIC_ID}
                title={<CRUDCardTitle type={card.type} title={card.title} />}
                id={card.id}
                icon={card.icon}
                disableBoldTitle
              />
            </Grid>
          ))}
        </>

        <Grid xs={12}></Grid>

        <>
          <Grid xs={12}>
            <Typography
              fontSize="16px"
              fontWeight={600}
              display="inline-flex"
              gap={1}
              color="#00913A"
            >
              <DiamondIcon /> Advanced features
            </Typography>
          </Grid>
          {cardsCfg2.map((card) => (
            <Grid xs={12} md={4} lg={3} key={card.id}>
              <ExampleCard
                topic={TOPIC_ID}
                title={card.title}
                id={card.id}
                icon={card.icon}
                disableBoldTitle
              />
            </Grid>
          ))}
        </>

        <Grid xs={12} textAlign="end">
          <MySQLCompatibleUTMBtn />
        </Grid>
      </Grid>
    </Layout>
  );
}

function CRUDCardTitle(props: {
  type: string;
  title: string | React.ReactNode;
}) {
  const { type, title } = props;

  return (
    <Box pb={1} minHeight={56}>
      <Box
        component="span"
        sx={{
          padding: "2px 8px",
          borderRadius: "6px",
          width: "fit-content",
          fontWeight: 700,
          fontSize: "16px",
          mr: 1,

          ...(type === "Create" && {
            color: "#0345EF",
            backgroundColor: "#E7F3FF",
          }),
          ...(type === "Select" && {
            color: "#01922A",
            backgroundColor: "#E9FFE7",
          }),
          ...(type === "Update" && {
            color: "#CA6202",
            backgroundColor: "#FFF4DF",
          }),
          ...(type === "Delete" && {
            color: "#950000",
            backgroundColor: "#FFEEEE",
          }),
        }}
      >
        {type}
      </Box>
      <Typography component="span">{title}</Typography>
    </Box>
  );
}