import * as React from "react";
import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Unstable_Grid2"; // Grid version 2

import Layout from "@/components/Layout2";
import { config as navCfg } from "@/components/Layout2/_config";
import { cards as cardsCfg } from "@/components/Sections/RealTimeAnalytics/_config";
import ExampleCard from "@/components/Sections/Common/Card";
import * as styles from "@/components/Sections/RealTimeAnalytics/style.module.css";
import { WhatMakesTiDBFasterUTMBtn } from "@/components/Button/UTMButton";

const TOPIC_ID = "real-time-analytics";
const SEOMeta = {
  title: "Realtime Analytics",
};

export default function RealTimeAnalytics() {
  return (
    <Layout
      navItems={navCfg.nav}
      navitemSelected={TOPIC_ID}
      mainClass={(styles as any).bg_grid}
      meta={SEOMeta}
    >
      <Grid container spacing={2} justifyContent="center">
        <>
          <Grid xs={12}>
            <Typography>Explore examples:</Typography>
          </Grid>
          {cardsCfg.map((card) => (
            <Grid xs={12} md={6} lg={4} key={card.id}>
              <ExampleCard
                topic={TOPIC_ID}
                title={card.title}
                id={card.id}
                icon={card.icon}
              />
            </Grid>
          ))}
        </>

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