import * as React from "react";

import {
  cards1 as cardsCfg1,
  cards2 as cardsCfg2,
} from "@/components/Sections/MysqlCompatible/_config";
import { config as navCfg } from "@/components/Layout2/_config";
import ContentTemplate from "@/components/Sections/Common/ContentTemplate";
import CreateContent from "@/components/Sections/MysqlCompatible/Content/Create";
import SelectContent from "@/components/Sections/MysqlCompatible/Content/Select";
import UpdateContent from "@/components/Sections/MysqlCompatible/Content/Update";
import DeleteContent from "@/components/Sections/MysqlCompatible/Content/Delete";
import ForeignKeyContent from "@/components/Sections/MysqlCompatible/Content/ForeignKey";
import JsonTypeContent from "@/components/Sections/MysqlCompatible/Content/JsonType";
import QueryWithIdxContent from "@/components/Sections/MysqlCompatible/Content/QueryWithIdx";

const cardsCfg = [
  {
    id: "simple-crud-subtitle",
    title: "Simple CRUD",
    type: "subTitle",
  },
  ...cardsCfg1.map((i) => ({
    id: i.id,
    title: i.type + " " + i.title,
  })),
  {
    id: "advanced-subtitle",
    title: "Advanced features",
    type: "subTitle",
  },
  ...cardsCfg2.map((i) => ({
    id: i.id,
    title: i.titleText,
  })),
];

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

  return (
    <ContentTemplate
      example={example}
      topic={topic}
      navItems={navCfg.nav}
      cards={cardsCfg}
    >
      {example === "create" && <CreateContent />}
      {example === "select" && <SelectContent />}
      {example === "update" && <UpdateContent />}
      {example === "delete" && <DeleteContent />}
      {example === "foreign-key" && <ForeignKeyContent />}
      {example === "json-column" && <JsonTypeContent />}
      {example === "idx" && <QueryWithIdxContent />}
    </ContentTemplate>
  );
}