import PropTypes from 'prop-types';
import IfActive from "../../application/IfActive/index.js";
import getColor from "../../../utils/colors/getColor.js";
import DiamondPair from './DiamondPair';
import DiamondSingle from './DiamondSingle';
import classes from './styles.module.scss';

/**
 * An entry in a map legend.
 */
const MapLegendItem = function MapLegendItem(props) {
  const {
    type,
    label,
    palette
  } = props;
  return <div className={classes.item}>
      <IfActive active={type === 'palette'}>
        <DiamondPair palette={palette} />
      </IfActive>

      <IfActive active={type === 'unclear'}>
        <DiamondSingle fill="white" stroke={getColor('warmgray-100')} />
      </IfActive>

      <div className={classes.label}>
        {label}
      </div>
    </div>;
};
MapLegendItem.defaultProps = {
  palette: undefined
};
MapLegendItem.propTypes = {
  /**
   * The type of marker that this is.
   */
  type: PropTypes.string.isRequired,
  /**
   * The label of the item.
   */
  label: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
  /**
   * The palette to use for palette markers.
   */
  palette: PropTypes.string
};
export default MapLegendItem;