import { StyledProps } from 'styled-components';
import { styled } from '../../styles';
import { textLinkInverted } from '../../styles/utils';
import { Flex } from '../Flex';

import { FooterProps } from './Footer';
import { theme } from '../../index';

const getVariant = ({ theme, variant }: StyledProps<FooterProps>) =>
  ({
    default: {
      Wrapper: {
        boxShadow: '0 -2px 0 0 #dfe3e6',
      },
      Links: {
        a: {
          color: theme.colors.baseText,
        },
      },
    },
    transparent: {
      Wrapper: {},
      Links: {
        a: {
          color: 'white',
        },
      },
    },
  }[variant]);

export const Wrapper = styled.div<StyledProps<FooterProps>>(props => ({
  width: '100%',
  height: props.theme.footer.height,
  ...getVariant(props).Wrapper,
}));

export const Inner = styled(Flex)(({ theme }) => ({
  height: theme.footer.height,
}));

export const Links = styled.ul<StyledProps<FooterProps>>(props => ({
  listStyle: 'none',
  margin: 0,
  marginLeft: 'auto',
  display: 'inline-flex',
  ...getVariant(props).Links,

  li: {
    display: 'inline-flex',
    alignItems: 'center',
    fontSize: '14px',
    lineHeight: '23px',
    marginLeft: '30px',
    fontWeight: 500,
    a: {
      ...textLinkInverted,
      color: theme.colors.gray[5],
      '&:hover': {
        color: theme.colors.highlightText,
      },
    },
  },
}));
