import * as React from 'react'
import { StylableComponent } from '../theme'
import { FormGroupProps } from './interfaces'
import { Column } from '../flex'

const styles = require('../../../src/components/form-group/styles.scss')

export class FormGroup extends StylableComponent<FormGroupProps> {
    public render() {
        const {id, label, children} = this.props
        return (
            <Column id={id} fullWidth justify="flex-start" className={styles.group}>
                <label className={styles.label}>{label}</label>
                {children}
            </Column>
        )
    }
}