import React from "react";
import PropTypes from "prop-types";
import styled from "@emotion/styled";
import { keyframes, css } from "@emotion/core";

const fadeIn = keyframes`
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
`;

const fadeOut = keyframes`
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
`;

const Quote = styled.blockquote`
  max-width: 620px;
  margin: 0;
  animation: ${fadeIn} 0.8s ease-in forwards;
  cursor: default;

  ${({ animate }) =>
    animate &&
    css`
      animation: ${fadeOut} 0.4s ease-in forwards;
    `}
`;

const Text = styled.p`
  margin: 0;
  font-size: 36px;
  line-height: 1.3;
  cursor: text;

  @media (max-width: 620px) {
    font-size: 32px;
  }
`;

const Footer = styled.footer`
  text-align: right;
  padding: 30px 30px 0 30px;
`;

const Cite = styled.cite`
  font-size: 24px;
  cursor: text;
`;

const Blockquote = ({ author, text, animate }) => (
  <Quote animate={animate} onClick={e => e.stopPropagation()}>
    <Text>{text}</Text>
    <Footer>
      <Cite>
        - <span>{author}</span>
      </Cite>
    </Footer>
  </Quote>
);

Blockquote.defaultProps = {
  animate: false
};

Blockquote.propTypes = {
  text: PropTypes.string.isRequired,
  author: PropTypes.string.isRequired,
  animate: PropTypes.bool
};

export default Blockquote;