import React, { FunctionComponent } from 'react';
import cn from 'classnames';

import { useTheme } from '../Theme';
import { StyledTag } from './styled-component';
import { Tooltip } from '../Tooltip';
import { TagType } from './types.d';
/**
 *
 * @param className
 * @param color - "white" | "lightGreen" | "gray" | "gray20" | "orange" | "purple" | "yellow" | "pink" | "green" | "blue"
 * @param customColor - only hex colors
 * @param icon
 * @param onClick - () => void
 * @param style
 * @param text
 * @param tooltip
 * @returns
 */
export const Tag: FunctionComponent<TagType> = ({
  className = '',
  color = 'orange',
  customColor,
  icon,
  onClick,
  style,
  text,
  tooltip,
}) => {
  const classNames = cn({
    'square-tag': true,
    [className]: true,
  });

  const theme = useTheme();

  return (
    <Tooltip title={tooltip}>
      <StyledTag className={classNames} style={style} $theme={theme} $color={color} $customColor={customColor} onClick={onClick}>
        {icon ? <div className="icon">{icon}</div> : null}
        <div className="text">{text}</div>
      </StyledTag>
    </Tooltip>
  );
};
