import * as React from "react";

import { cards as cardsCfg } from "@/components/Sections/RealTimeAnalytics/_config";
import { config as navCfg } from "@/components/Layout2/_config";
import SQL from "@/components/Sections/RealTimeAnalytics/SQL";
import ContentTemplate from "@/components/Sections/Common/ContentTemplate";

export default function Content(props: { example: string; topic: string }) {
  const { example, topic } = props;

  const cardCfgMemo = React.useMemo(() => {
    return cardsCfg.find((i) => i.id === example);
  }, [example]);

  return (
    <ContentTemplate
      example={example}
      topic={topic}
      navItems={navCfg.nav}
      cards={cardsCfg}
    >
      <SQL
        sql={cardCfgMemo?.sql || ""}
        example={example}
        defaultTimerange={cardCfgMemo?.defaultTimerange}
        defaultTimeranges={cardCfgMemo?.defaultTimeranges}
      />
    </ContentTemplate>
  );
}