content: import React from 'react';
  import PropTypes from 'prop-types';
  import Helmet from 'react-helmet';
  import { TransitionGroup } from 'react-transition-group';
  import { Container, Segment, Image } from 'semantic-ui-react';
  
  import Error from './Error';
  import Block from './Block';
  import Pop from '../animations/Pop';
  import './Page.css';
  
  export const PageComponent = ({ page, loading, error }) => {
    if (error && error.status && error.message) {
      return <Error status={error.status} message={error.message} />;
    }
  
    if (!page || loading) {
      return (
        <Container text>
          <Segment vertical loading={loading}>
            <Image src="/img/paragraph.png" />
          </Segment>
        </Container>
      );
    }
  
    const { title, description, blocks } = page;
  
    return (
      <Container className="page-content" text>
        <Helmet>
          <title>{title}</title>
          <meta name="description" content={description} />
        </Helmet>
        <TransitionGroup component="article" appear enter exit>
          {blocks.map(b => (
            <Pop key={b.key} in appear>
              <Block block={b} />
            </Pop>
          ))}
        </TransitionGroup>
      </Container>
    );
  };
  
  PageComponent.propTypes = {
    loading: PropTypes.bool,
    page: PropTypes.shape({
      title: PropTypes.string.isRequired,
      description: PropTypes.string.isRequired,
      blocks: PropTypes.array.isRequired,
    }),
    error: PropTypes.shape({
      status: PropTypes.string.isRequired,
      message: PropTypes.string.isRequired,
    }),
  };
  
  PageComponent.defaultProps = {
    page: null,
    error: null,
    loading: false,
  };
  
  export default PageComponent;
  