content: import { css } from '@rocket.chat/css-in-js';
  import colors from '@rocket.chat/fuselage-tokens/colors';
  import React from 'react';
  
  const clickable = css`
  	cursor: pointer;
  	border-bottom: 2px solid ${colors.n300} !important;
  
  	&:hover,
  	&:focus {
  		background: ${colors.n100};
  	}
  `;
  
  // TODO remove border from here
  export function clickableItem(Component) {
  	const WrappedComponent = (props) => <Component className={clickable} tabIndex={0} {...props} />;
  
  	WrappedComponent.displayName = `clickableItem(${
  		Component.displayName ?? Component.name ?? 'Component'
  	})`;
  
  	return WrappedComponent;
  }
  