import React from 'react';
import PropTypes from 'prop-types';
import './Tag.css';
import Button from '../Button/Button';
import { getTagTextColor } from '../../utils/utils';

const Tag = ({ tag, handleClick, getTagColor, active }) => {
  let color = getTagColor(tag);
  let textColor = getTagTextColor({tagColor: color});
  let tagStyle = {
    background: color,
    color: textColor
  };

  return (
    <Button btnClass={active ? 'tag tag-active' : 'tag tag-passive'}
            onClick={() => handleClick(tag)}
            style={tagStyle}
            text={tag} />
  )
}

Tag.propTypes = { tag: PropTypes.string.isRequired }
Tag.defaultProps = { handleClick: () => {} }

export default Tag;