import * as React from 'react'
import * as cx from 'classnames'

import { ButtonProps } from '../interfaces'

const styles = require('../../src/styles/components/button.scss')

export class Button extends React.Component<ButtonProps, any> {

    public render(): JSX.Element {
        const { id, disabled, onClick, children, type } = this.props
        return (
            <button
                id={id}
                type={type || 'button'}
                className={this.classNames()}
                disabled={disabled}
                onClick={onClick}>
                {children}
            </button>
        )
    }

    private classNames(): string {
        return cx(
            this.props.className,
            styles.container,
            {
                [styles.primary]: this.props.primary,
                [styles.disabled]: this.props.disabled,
                [styles.condensed]: this.props.condensed,
            },
        )
    }
}