// @flow
import { type ComponentType } from 'react';
import styled from 'styled-components';
import type { MenuItemProps } from './menu-item.proptypes';
import { UnstyledButton } from '../../../behaviors';
import { getPaletteColor } from '../../../../mixins/branding';

export const MenuItem: ComponentType<MenuItemProps> = styled(
  UnstyledButton,
).attrs(() => ({
  role: 'menuitem',
  tabIndex: '-1',
}))`
  &:hover {
    background-color: ${getPaletteColor('background')};
  }
`;

MenuItem.displayName = 'MenuItem';
