import React from 'react'
import classnames from 'classnames'

import './index.scss'

interface Props {
    empty: boolean
    special: boolean
    flb: boolean
    ulb: boolean
    index: number
    onClick: (index: number, empty: boolean) => void
}

const UncapStar = (props: Props) => {
    const classes = classnames({
        UncapStar:  true,
        'empty':    props.empty,
        'special':  props.special,
        'mlb':      !props.special,
        'flb':      props.flb,
        'ulb':      props.ulb

    })

    function clicked() {
        props.onClick(props.index, props.empty)
    }

    return (
        <li className={classes} onClick={clicked}></li>
    )
}

UncapStar.defaultProps = {
    empty: false,
    special: false,
    flb: false,
    ulb: false
}

export default UncapStar