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

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

export class DropdownItem extends StylableComponent<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>
        )
    }
}