import React from 'react';
import cn from 'classnames';
import { Icon, Tooltip } from 'UI';
import stl from './funnelMenuItem.module.css';
import { useTranslation } from 'react-i18next';

function FunnelMenuItem({
  iconName = 'info',
  className,
  title,
  active = false,
  disabled = false,
  isPublic = false,
  onClick,
}) {
  const { t } = useTranslation();
  return (
    <div
      className={cn(
        className,
        stl.menuItem,
        'flex items-center py-1 justify-between group',
        {
          [stl.active]: active,
        },
      )}
      onClick={disabled ? null : onClick}
    >
      <div
        className={cn(stl.iconLabel, 'flex items-center', {
          [stl.disabled]: disabled,
        })}
      >
        <div className="flex items-center justify-center w-8 h-8 flex-shrink-0">
          <Icon
            name={iconName}
            size={16}
            color="gray-dark"
            className="absolute"
          />
        </div>
        <span className={cn(stl.title, 'cap-first')}>{title}</span>
      </div>
      <div className="flex items-center">
        <div className={cn('mx-2', { invisible: !isPublic })}>
          <Tooltip title={t('Shared with team')}>
            <div
              className={cn(
                'bg-gray-light h-8 w-8 rounded-full flex items-center justify-center',
                stl.teamIcon,
              )}
              style={{ opacity: '0.3' }}
            >
              <Icon name="user-friends" color="gray-dark" size={16} />
            </div>
          </Tooltip>
        </div>
      </div>
    </div>
  );
}

export default FunnelMenuItem;