import React from 'react';
import Image from 'next/image';
import { useRouter } from 'next/router';

import { EDITORIAL_PAGE } from '@/modules/@common/router/constants';

import RoundItemContainer from '../RoundItemContainer';
import { Button, Grid, Typography } from '@/mui/components';

import img from './img/img.png';

import styles from './GlobalStateEmpty.module.scss';

function StateEmpty() {
  const router = useRouter();
  return (
    <RoundItemContainer
      container
      justifyContent="center"
      alignItems="center"
      direction="column"
      className={styles.Wrapper}
    >
      <Grid item className={styles.ImageWrapper}>
        <Image src={img} alt="test" className={styles.Image} />
      </Grid>
      <Grid item className={styles.Description}>
        <Typography variant="h6" color="text.secondary" fontWeight={400} component="div">
          Use cutting-edge analytics to identify new trends and measure indicators to make decisions confidently. <br />{' '}
          Start uploading, viewing, sharing, commenting and searching videos!
        </Typography>
      </Grid>
      <Grid item alignItems="center" className={styles.CtaWrapper}>
        <Button
          className={styles.Button}
          variant="contained"
          size="small"
          onClick={() => router.push(EDITORIAL_PAGE.path)}
        >
          <span>Let&apos;s Get Started</span>
        </Button>
      </Grid>
    </RoundItemContainer>
  );
}

export default StateEmpty;
