import React, { FunctionComponent } from "react"
import Label from "../label/Label"
import styled from "styled-components"
import { distance } from "../../style/sizes"

interface InputWithLabelProps {
    label: string
    bold?: boolean
}

export const InputWithLabel: FunctionComponent<InputWithLabelProps> = props =>
    <StyledInputWithLabel>
        {props.bold ? <Label><b>{props.label}</b></Label> : <Label>{props.label}</Label>}
        {props.children}
    </StyledInputWithLabel>

const StyledInputWithLabel = styled.div`
  display: flex;
  flex-direction: column;
  margin-right: ${distance.medium};
`