import * as React from 'react';

interface IMenuItemProps {
  className?: string
  text: string
  title?: string
  shortcut?: string
  onClick: () => void
}

export function MenuItem(props: IMenuItemProps): JSX.Element {
  return (
    <button type="button"
      className={`flex place-content-between ${props.className ?? ''}`}
      title={props.title}
      onClick={() => { props.onClick(); }}>
      {props.text}
      <span dangerouslySetInnerHTML={{ __html: props.shortcut ?? '' }} />
    </button>
  );
}