footer.tsx

import React from 'react'
import { useTranslation } from 'react-i18next'
import { styled } from '@mui/material/styles'
import { Link } from '@mui/material'

import { reponsibleOrganization, responsibleOrganizationLink } from 'appConfig'

import { getFooterLogo } from './logos'

const FooterWrapper = styled('footer')(({ theme }) => ({
  background: theme.greg.footerBackgroundColor,
  height: 'fit-content',
  padding: '0rem 3.5rem',
  marginTop: 'auto',
}))

const FooterSection = styled('section')({
  // header: {
  //  marginBottom: '0.5rem',
  //  fontSize: '1.5rem',
  // },

  paddingLeft: '1rem',
})

const ContentContainer = styled('div')(({ theme }) => ({
  // width: 'fit-content',
  fontSize: '1.5rem',
  color: theme.greg.footerTextColor,
  display: 'flex',
  flexWrap: 'nowrap',
  justifyContent: 'space-between',
  // margin: '0 1rem',
  padding: '1rem 0rem 1rem 0',
}))

const LogoContainer = styled('div')({
  maxWidth: '30rem',
  minWidth: '20rem',
})

const FooterHeader = styled('div')({
  fontsize: '1rem',
})

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

  return (
    <FooterWrapper>
      <ContentContainer>
        <FooterSection>
          <LogoContainer>{getFooterLogo()}</LogoContainer>
        </FooterSection>

        <FooterSection sx={{ paddingTop: '1rem' }}>
          <FooterHeader>
            {t('footer:responsibleOrganizationHeader')}
          </FooterHeader>
          <Link
            href={responsibleOrganizationLink}
            sx={{ color: 'white', fontSize: '1rem' }}
          >
            {reponsibleOrganization}
          </Link>
        </FooterSection>
      </ContentContainer>
    </FooterWrapper>
  )
}

export default Footer