import React from 'react';
import { BubbleItemProps } from '../../../types/list/types';
import styles from './bubbleItem.module.scss';

const BubbleItem: React.FC<BubbleItemProps> = ({
  option,
  isSelected,
  size,
  disabled,
  onClick,
  itemClassName
}) => {
  return (
    <button
      className={`${styles.bubbleOption} ${size} ${isSelected ? styles.selected : ''} ${
        option.disabled || disabled ? styles.disabled : ''
      } ${itemClassName ? itemClassName : ''}`}
      onClick={() => onClick(option)}
      disabled={option.disabled || disabled}
    >
      {option.icon && <span className={ styles.bubbleIcon}>{option.icon}</span>}
      <span className={styles.bubbleLabel}>{option.label}</span>
      {option.description && <span className={ styles.bubbleDescription}>{option.description}</span>}
    </button>
  );
};

export default BubbleItem;