import styled from 'styled-components'
import PropTypes from 'prop-types'
import { ReactNode } from 'react'
import { ThemeColor } from './theme.js'

const StyledFigure = styled.figure<{ color?: ThemeColor }>`
  position: relative;
  padding: 0 16px;
  margin: 0 0 16px 16px;
  ::before {
    content: '';
    height: 100%;
    position: absolute;
    left: 0;
    width: 4px;
    border: solid ${({ color = 'navBlue', theme }) => theme[color] ?? theme.navBlue} 2px;
    background: ${({ color = 'navBlue', theme }) => theme[color] ?? theme.navBlue};
    border-radius: 2px;
  }
`

const StyledBlockQuote = styled.blockquote`
  && p {
    padding-bottom: 0;
    color: ${({ theme }) => theme.neutral500};
    font-style: italic;
    font-size: 14px;
  }
  margin: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
`

type BlockQuoteProps = {
  children?: ReactNode
  color?: ThemeColor
}

const BlockQuote = ({ children, color }: BlockQuoteProps) => {
  return (
    <StyledFigure color={color}>
      <StyledBlockQuote>{children}</StyledBlockQuote>
    </StyledFigure>
  )
}

BlockQuote.propTypes = {
  /** It changes the color of the line to the left of the quote, must be defined in the theme (ex: navBlue) */
  color: PropTypes.string,
  /** The actual quote */
  children: PropTypes.string,
}

export default BlockQuote