import * as React from 'react'
import * as cx from 'classnames'
import { HoverableComponent } from '../common'
import { TableProps } from './interfaces'

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

export class Table extends HoverableComponent<TableProps> {
    public render(): JSX.Element {
        return (
            <table
                onMouseEnter={this.onMouseEnter}
                onMouseLeave={this.onMouseLeave}
                className={this.classNames()}
                cellPadding={0}
                cellSpacing={0}>
                {this.props.children}
            </table>
        )
    }
    private classNames(): string {
        return cx(
            styles.container,
            {
                [styles.bordered]: this.props.bordered,
                [styles.condensed]: this.props.condensed,
                [styles.striped]: this.props.striped,
                [styles.hover]: this.props.hover,
                [styles.stripedHover]: this.props.hover && this.props.striped,
            },
            this.props.className,
        )
    }
}