footer.tsx

import React from 'react'
import styled from 'styled-components/macro'
import { useTranslation } from 'react-i18next'
import {
  appStagingWarning,
  appTechnicalSupportLink,
  reponsibleOrganization, responsibleOrganizationLink,
} from '../../appConfig'
import Link from '../../components/link'


const FooterWrapper = styled.footer`
  background: ${({ theme }) => theme.footer.backgroundColor};
  height: fit-content;
  padding: 0rem ${({ theme }) => theme.horizontalPadding};
  margin-top: auto;
`

const FooterSection = styled.section`
  header {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
  }

  padding-left: 1rem;
`


const FooterSectionContent = styled.div`
  font-size: 1rem;
  padding-left: 0.3rem;
`

const ContentContainer = styled.div`
  width: fit-content;
  color: ${({ theme }) => theme.footerTextColor};
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: auto;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
`

const Footer: React.FunctionComponent = () => {
  const { i18n, t } = useTranslation(['common', 'footer'])

  return (
    <>
      <FooterWrapper>
        <ContentContainer>
          <FooterSection>
            <header>{t('footer:contactSectionHeader')}</header>
            <FooterSectionContent>
              <Link
                external
                to={appTechnicalSupportLink}
                inheritColor
                underline
              >
                {t('footer:contactHelp')}
              </Link>
            </FooterSectionContent>
          </FooterSection>

          <FooterSection>
            <header>{t('footer:responsibleOrganizationHeader')}</header>
            <FooterSectionContent>
              <Link
                external
                to={responsibleOrganizationLink}
                inheritColor
                underline
              >
                {reponsibleOrganization}
              </Link>
            </FooterSectionContent>
          </FooterSection>
        </ContentContainer>
      </FooterWrapper>
      {appStagingWarning && (
        <div className='alert'>
          {t('staging')}
        </div>
      )}
    </>
  )
}

export default Footer