import { ReactNode } from 'react'
import styled from 'styled-components'
import Copy from './copy.js'
import isRebrand from './is-rebrand.js'
import { ThemeColor } from './theme.js'

const setColor = (theme, color) => {
  if (isRebrand(theme)) return color ? theme[color] : theme.navSecondary600
  return color ? theme[color] : theme.flounderYellow200
}

const StyledAside = styled.aside<{ color?: ThemeColor }>`
  position: relative;
  padding: 0 1em;
  margin: 0;

  &::before {
    content: '';
    height: 100%;
    position: absolute;
    left: 0;
    width: 4px;
    ${({ theme, color = 'flounderYellow200' }) => !isRebrand(theme) && `border: solid ${theme[color]} 2px`};
    background: ${({ theme, color }) => setColor(theme, color)};
    border-radius: 2px;
  }
`

const Title = styled.h3`
  color: ${({ theme }) => (isRebrand(theme) ? theme.navNeutralDark : theme.neutral500)};
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
`
const Text = styled(Copy).attrs(() => ({ size: 'sm' }))`
  color: ${({ theme }) => (isRebrand(theme) ? theme.navNeutralDark : theme.neutral500)};
  font-style: italic;
`

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

const BlockQuote = ({ title, children, color, ...props }: BlockQuoteProps) => (
  <StyledAside color={color} data-testid="aside" {...props}>
    {title && <Title>{title}</Title>}
    <Text>{children}</Text>
  </StyledAside>
)

export default BlockQuote