import * as React from 'react'
import * as cx from 'classnames'
import { StylableComponent } from '../theme'
import { DividerProps } from './interfaces'

const styles = require('../../../src/components/divider/styles.scss')
const borders = require('../../../src/components/styles/globals/borders.scss')

export class Divider extends StylableComponent<DividerProps> {
    public render(): JSX.Element {
        return (
            <div className={this.classNames()} />
        )
    }

    private classNames(): string {
        const {
            dotted,
            vertical,
        } = this.props

        return cx(
            this.props.className,
            dotted ? borders.dotted : borders.light,
            vertical ? styles.y : styles.x,
        )
    }
}