import * as React from 'react'
import { StylableComponent } from '../theme'
import { SpinnerProps } from './interfaces'

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

export class Spinner extends StylableComponent<SpinnerProps> {
    public static defaultProps: SpinnerProps = {
        visible: true,
        size: 10,
    }

    public render() {
        const inline = {
            width: `${this.props.size}px`,
            height: `${this.props.size}px`,
            margin: `${this.props.size}px auto`,
        }

        return this.props.visible
            ? <div className={styles.visible} style={inline} />
            : <div className={styles.invisible} style={inline} />
    }
}