import * as React from 'react'
import { DropdownItemProps } from '../interfaces'
import * as cx from 'classnames'
import { randomID } from '../utils'
const styles = require('../../src/styles/components/dropdown.scss')

export class DropdownItem extends React.Component<DropdownItemProps, {}> {

    public classNames() {
        return cx(
            styles.item,
            { [styles.active]: this.props.active },
            this.props.className,
        )
    }

    public render() {

        const {onClick, id, children} = this.props
        return (
            <li
                id={id}
                className={this.classNames()}
                onClick={onClick}>
                {children}
            </li>
        )
    }
}