import * as React from "react";
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/Scalable/_config";
import Content from "@/components/Sections/Scalable/Content";

const TOPIC_ID = "scalability";
const SEOMeta = {
  title: "Scalable",
};

export default function RealTimeAnalytics(props: {
  example_id: string;
  toppic_id: string;
  example_title: string;
}) {
  const { example_id, toppic_id, example_title } = props;

  return (
    <Layout
      navItems={navCfg.nav}
      navitemSelected={toppic_id}
      meta={{
        title: example_title + " - " + SEOMeta.title,
      }}
    >
      <Grid container spacing={2} justifyContent="center">
        <Grid xs={12} container>
          <Content
            key={`${TOPIC_ID}-${example_id}`}
            example={example_id}
            topic={TOPIC_ID}
          />
        </Grid>
      </Grid>
    </Layout>
  );
}

export async function getStaticPaths() {
  const paths = cardsCfg.map((card) => ({
    params: { example_id: card.id },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }: any) {
  const targetCard = cardsCfg.find(
    (card) => card.id === params.example_id
  ) as (typeof cardsCfg)[0];
  return {
    props: {
      example_id: params.example_id,
      toppic_id: TOPIC_ID,
      example_title: targetCard.title,
    },
  };
}