import * as React from 'react';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2

import HomeCard from 'src/components/Card/HomeCard';
import { FAQIcon, AnouncementsIcon, TiDBCloudStatusIcon } from 'src/icons';
import { Pages } from 'src/constants';

const CARD_DATA = [
  {
    title: 'Knowledge Base',
    icon: FAQIcon,
    url: Pages.Articles,
  },
  // {
  //   title: 'Anouncements',
  //   icon: AnouncementsIcon,
  //   url: '/articles/360061072733-SLA-Change-for-the-TiDB-Cloud-Public-Preview',
  // },
  {
    title: 'TiDB Cloud Status',
    icon: TiDBCloudStatusIcon,
    url: 'https://status.tidbcloud.com/',
  },
];

export default function CardSection(props: any) {
  return (
    <>
      <Grid container spacing={2}>
        {CARD_DATA.map((item, index) => (
          <Grid key={`grid-${item.title}`} xs={12} sm={6} md={4}>
            <HomeCard
              key={item.title}
              title={item.title}
              Icon={item.icon}
              url={item.url}
            />
          </Grid>
        ))}
      </Grid>
    </>
  );
}