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

import { interactionStyling } from '../Item';

const FooterLink = styled('a')`
  ${interactionStyling}
  display: flex;
  align-items: center;
  padding-left: ${themeGet('space.2')};
  padding-right: ${themeGet('space.2')};
  padding-top: ${themeGet('space.1')};
  padding-bottom: ${themeGet('space.1')};
  color: ${themeGet('colors.white')};
  text-decoration: none;
  min-width: 0;
  & + a {
    border-left: 1px solid ${themeGet('sidebarStyles.borderColor')};
  }
`;

const FooterLinkIcon = styled('span')`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${themeGet('space.1')};
  fill: ${themeGet('colors.white')};
`;

const FooterText = styled('span')`
  padding: ${themeGet('space.1')};
  line-height: 1.5;
  ${ellipsis}
`;

interface FooterItemProps {
  icon?: React.ReactNode;
}
const FooterItem: React.FC<React.HTMLProps<HTMLAnchorElement> & FooterItemProps> = ({
  icon,
  children,
  ...props
}) => (
  <FooterLink {...props}>
    {!!icon && <FooterLinkIcon>{icon}</FooterLinkIcon>}
    {!!children && <FooterText>{children}</FooterText>}
  </FooterLink>
);

export default FooterItem;