import * as React from 'react';
import styled from '@emotion/styled';
import { themeGet } from '@styled-system/theme-get';

interface Props {
  theme?: any;
  danger?: boolean;
}
const MenuLink = styled('a')<Props>`
  color: ${themeGet('sidebarStyles.menulink.normal.color')};
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: ${themeGet('space.2')};
  font-size: ${themeGet('fontSizes.text-s')};
  border-radius: ${themeGet('radii.radius-1')};
  line-height: 1;

  &:active,
  &:hover,
  &:focus {
    background-color: ${themeGet('sidebarStyles.menulink.normal.color')};
    font-weight: normal;
    color: ${themeGet('colors.white')};
  }

  ${props =>
    props.danger &&
    `
    color: ${themeGet('sidebarStyles.menulink.danger.color')(props)};

    &:active,
    &:hover,
    &:focus {
      background-color: ${themeGet('sidebarStyles.menulink.danger.color')(props)};
    }
  `}
`;

const MenuItem: React.FC<React.HTMLProps<HTMLAnchorElement> & Props> = props => (
  <li>
    <MenuLink {...props} />
  </li>
);

export default MenuItem;