import Emoji from './helpers/Emoji';

interface MenuItemWithEmojiProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string;
  icon: string;
  className?: string;
}

export const MenuItemWithEmoji = ({
  label,
  icon,
  className,
  ...props
}: MenuItemWithEmojiProps) => {
  const cn = ['flyout-item paddingX4 flex justifyBetween', className]
    .join(' ')
    .trim();

  return (
    <div className={cn} {...props}>
      <span>{label}</span>
      <Emoji symbol={icon} label={label} />
    </div>
  );
};