import React from 'react';

import RichText from '../RichText';
import { IQuote } from './Quote.interface';
import { StyledQuote } from './Quote.theme';

const Quote = ({
  id,
  value,
  citation,
  className,
  children,
  ...props
}: IQuote) => {
  return (
    <StyledQuote id={id} {...props}>
      <blockquote>
        <RichText tag="div">{value}</RichText>
      </blockquote>
      {!!citation && (
        <figcaption>
          ~ <RichText tag="span">{citation}</RichText>
        </figcaption>
      )}
    </StyledQuote>
  )
}

export default Quote