import React, { FunctionComponent } from 'react'
import styled from 'styled-components'
import { InputWithLabel } from '../inputWithLabel/InputWithLabel'
import { distance } from '../../style/sizes'

interface ChartInfoBoxProps {
    description: string
    bold?: boolean
}

export const ChartInfoBox: FunctionComponent<ChartInfoBoxProps> = props => {

    return <StyledChartInfoBox>
        <StyledRow>
            <InputWithLabel bold={props.bold} label={'Description:'}>
                {props.description}
            </InputWithLabel>
        </StyledRow>
        <StyledRow>
            <InputWithLabel bold={props.bold} label={'Options:'}>
                {props.children}
            </InputWithLabel>
        </StyledRow>
    </StyledChartInfoBox>
}

const StyledChartInfoBox = styled.div`
  display: flex;
  flex-direction: column;
  background: ${({ theme }) => theme.colors.backgroundSecondary};
`

const StyledRow = styled.div`
  padding: ${distance.large};
  display: flex;
  flex-direction: row;
`