import * as React from "react";
import AutoGraphIcon from "@mui/icons-material/AutoGraph";
import JoinInnerIcon from "@mui/icons-material/JoinInner";

import { ScalableIcon } from "@/components/Icons";

export const config: {
  nav: NavItemType[];
} = {
  nav: [
    {
      id: "scalability",
      title: "Scalability",
      url: "/scalability",
      Icon: (
        <ScalableIcon
          sx={{
            fontSize: "12px",
          }}
        />
      ),
    },
    {
      id: "mysql-compatibility",
      title: "MySQL Compatibility",
      url: "/mysql-compatibility",
      Icon: (
        <JoinInnerIcon
          sx={{
            fontSize: "inherit",
          }}
        />
      ),
    },
    {
      id: "real-time-analytics",
      title: "Real-time Analytics",
      url: "/real-time-analytics",
      Icon: <AutoGraphIcon fontSize="inherit" />,
    },
  ],
};

export type NavItemType = {
  id: string;
  title: string;
  url: string;
  Icon?: React.ReactElement;
};