import * as React from 'react';
import type { NextPage } from 'next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

import Layout from 'src/components/Layout';
import { Pages } from 'src/constants';
import NewRequestCard from 'src/components/Card/NewRequestCard';
import { TiDBCloudLogoBlackSVG, TiDBLogoBlackSvg } from 'src/icons';

export default function NewRequestMainSction(props: {
  handleRequestType: (type: 'tidb' | 'cloud') => void;
}) {
  const { handleRequestType } = props;

  const { t } = useTranslation();

  return (
    <>
      <Typography variant="h2" component="h1">
        {t('new_request.title')}
      </Typography>
      <Typography variant="h6">{t('new_request.subtitle')}</Typography>
      <Box
        sx={{
          display: {
            xs: 'flex',
            md: 'grid',
          },
          gridTemplateColumns: `repeat( auto-fit, minmax(250px, 400px) )`,
          gap: '2.5rem',
          flexDirection: 'column',
        }}
      >
        <NewRequestCard
          title={t('new_request.tidb_cloud_support')}
          Icon={TiDBCloudLogoBlackSVG}
          onClick={() => {
            handleRequestType('cloud');
          }}
        />
        <NewRequestCard
          title={t('new_request.tidb_support')}
          Icon={TiDBLogoBlackSvg}
          onClick={() => {
            handleRequestType('tidb');
          }}
        />{' '}
      </Box>
    </>
  );
}