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

export const MenuItem: ComponentType<MenuItemProps> = styled(
  UnstyledButton,
).attrs(() => ({
  role: 'menuitem',
  tabIndex: '-1',
}))`
  &:first-child {
    border-radius: ${getTopBorderRadius} ${getTopBorderRadius} 0 0;
  }

  &:last-child {
    border-radius: 0 0 ${getBottomBorderRadius} ${getBottomBorderRadius};
  }

  &:hover {
    background-color: ${getPaletteColor('background')};
  }
`;

MenuItem.displayName = 'MenuItem';
