import React from 'react';
import PropTypes from 'prop-types';
import Image from 'next/image';
import NextLink from 'next/link';

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

import logo from '@/assets/img/logo.png';

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

function Page({ onClick = null, linkText = null, ...props }) {
  return (
    <div className={styles.Wrapper}>
      <div>
        <Image src={logo} alt="AnyClip" className={styles.Img} width={200} height={50} />
        <Stack spacing={2} fullWidth justifyContent="center">
          <Typography variant="h6" fontWeight={600} align="center" component="div">
            {props.title}
          </Typography>
          <Typography align="center" component="div" variant="body2" fontWeight={400}>
            {props.description}
          </Typography>
          {linkText && (
            <Stack spacing={0} justifyContent="center" direction="row" className={styles.LinkBlock}>
              <Button
                component={NextLink}
                href="/"
                onClick={(event) => {
                  if (onClick) {
                    event.preventDefault();

                    onClick();
                  }
                }}
              >
                {linkText}
              </Button>
            </Stack>
          )}
        </Stack>
      </div>
    </div>
  );
}

Page.propTypes = {
  onClick: PropTypes.func,
  linkText: PropTypes.node,
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
};

export default Page;
