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;