import React from 'react';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { AddRounded } from '@mui/icons-material';

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

import EmptyLogo from '@/assets/img/empty.svg';

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

function Empty() {
  const router = useRouter();
  return (
    <Grid container className={styles.EmptyWrapper}>
      <Stack spacing={10} alignItems="center" justifyContent="center" className={styles.EmptyContent}>
        <Image src={EmptyLogo} width={175} height={175} alt="empty-logo" />
        <Typography variant="h6" color="text.primary" fontWeight={500}>
          Click below to create content owner
        </Typography>
        <Button
          size="medium"
          variant="contained"
          color="primary"
          startIcon={<AddRounded />}
          onClick={() => router.push('/content-owners/new')}
        >
          Content Owner
        </Button>
      </Stack>
    </Grid>
  );
}

export default Empty;
