import * as React from 'react'
import { ListProps, ListItemProps } from '../interfaces'
import * as cx from 'classnames'

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

export class List extends React.Component<ListProps, {}> {
    public render() {
        return (
            <ul className={this.classNames()}>{this.props.children}</ul>
        )
    }

    protected classNames(): string {
        return cx(styles.container, this.props.className)
    }
}

export class ListItem extends React.Component<ListItemProps, {}> {
    public render() {
        return (
            <li className={this.classNames()} onMouseDown={this.props.onClick}>
                {this.props.children}
            </li>
        )
    }

    protected classNames(): string {
        return cx(styles.item, this.props.className)
    }
}