import React from 'react';
import { css } from '@emotion/core';
import { Box, Flex, Text } from '@rebass/emotion';

import Navigation from 'components/navigation';
import SocialIcons from 'components/social-icons';
import { DynamicFooterProps } from 'components/layout/footer/footer.types';

import theme from 'utils/theme';
import { FluidContainer } from 'utils/styles/mixins';

import FooterContainer from '../components/footer-container';
import PoweredByFloom from '../components/powered-by-floom';
import FooterLogo from '../components/footer-logo';
import * as Styles from './horizontal-thin.styles';
import FooterMobile from '../footer-mobile';

const FooterHorizontalThin = (props: DynamicFooterProps): JSX.Element => {

  return (
    <>
      <FooterMobile {...props} />
      <FooterContainer>
        <Box
          py={1}
          bg={theme.colors.black}
        >
          <FluidContainer>
            <Flex
              alignItems="center"
            >
              {props.logoIcon &&
              <Box
                  mr={1}
              >
                  <FooterLogo logo={props.logoIcon} title={props.title} />
              </Box>
              }
              <Box
                width="auto"
                alignSelf="center"
                mr={1}
              >
                <Navigation
                  styleOverrides={css`
                  li {
                    padding: calc(${theme.space[1]}px / 2);
                  }
                  a {
                    font-weight: 600;
                    color: ${props.themeConfig.textColour};
                  }
                `}
                  items={props.navigation}
                />
              </Box>
              <Styles.Divider />
              <Flex
                flex="1 0 10%"
                textAlign="right"
                alignItems="center"
              >
                { props.config.showSocial &&
                <SocialIcons
                    margin={`${theme.space[1]}px`}
                    iconFill={props.themeConfig.iconColour}
                />
                }
              </Flex>
              <Flex ml="auto">
                <PoweredByFloom />
              </Flex>
            </Flex>
          </FluidContainer>
        </Box>
      </FooterContainer>
    </>

  );
};

export default FooterHorizontalThin;