import React, { FC } from 'react';
import styled from 'styled-components';

import { fadeIn } from '../helpers/animations';

const ListItem = styled.li`
  margin-left: 32px;
  animation: ${fadeIn} 0.8s ease;

  @media only screen and (max-width: 488px) {
    margin-left: 16px;
    font-size: 13px;
  }
`;

const ListLink = styled.div`
  & > a {
    padding-bottom: 1px;
    color: inherit;
    text-decoration: none;
  }
  & > a:hover {
    color: #2196f3;
    border-bottom: 1px dotted #2196f3;
  }
`;

const HeaderMenuItem: FC = ({ children }) => (
  <ListItem>
    <ListLink>{children}</ListLink>
  </ListItem>
);

export default HeaderMenuItem;