import * as React from 'react'
import { StylableComponent } from '../theme'
import { Column } from '../flex'
import { Icon } from '../icon'
import { RadioButtonProps, RadioOption } from './interfaces'

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

export class RadioButton extends StylableComponent<RadioButtonProps> {

    public render() {
        return (
            <Column align="center" className={styles.option}>
                <input
                    checked={this.props.isSelected}
                    className={styles.radio}
                    type="radio"
                    name={this.props.name}
                    value={this.props.value}
                    onChange={this.props.onChange}
                />
                <Icon icon={this.props.img} fill="primary" className={styles.icon} size={34} />
                <label className={styles.label} htmlFor={this.props.name}>{this.props.label}</label>
            </Column>

        )
    }
}