/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import {FC, MouseEvent} from 'react';
import {TagContainer} from './style';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faTimes} from '@fortawesome/free-solid-svg-icons';

export interface ITag {
  label: string;
  onClose?: (event: MouseEvent<HTMLSpanElement>) => void | null;
  handleClick?: () => void;
  disabled?: boolean;
  className?: string;
}

export const Tag: FC<ITag> = ({className, label, onClose = null, handleClick = () => null, disabled = false}: ITag) => {
  const onKeyPress = (): void => null;

  return (
    <TagContainer onClick={handleClick} disabled={disabled} className={className}>
      <p>{label}</p>
      {onClose && (
        <span role="button" tabIndex={-1} onKeyPress={onKeyPress} onClick={onClose}>
          <FontAwesomeIcon icon={faTimes} />
        </span>
      )}
    </TagContainer>
  );
};
