import { Link, useParams } from '@tanstack/react-router'
import { Stack, Container, Group, Anchor, Box } from '@pikku/mantine/core'
import { useI18n } from '@/context/i18n-provider'

export default function FooterBar() {
  const t = useI18n()
  const params = useParams({ strict: false })
  const lang = params.lang as string || 'en'
  return (
    <Box
      component="footer"
      bg="white"
      style={{ borderTop: '1px solid var(--mantine-color-gray-2)' }}
    >
      <Container size="lg" w="100%">
        <Stack gap="lg" py="xl">
          <Box
            pos="relative"
            h={75}
            w="100%"
            style={{ aspectRatio: '4/2' }}
          >
            <img
              src="/brands.png"
              alt="Partner Logos"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }}
            />
          </Box>

          <Group justify="center" gap="lg" pt="sm">
            <Anchor component={Link} to={`/${lang}/legal/imprint`} size="sm">
              {t('layout.footer.imprint')}
            </Anchor>
            <Anchor component={Link} to={`/${lang}/legal/terms-and-conditions`} size="sm">
              {t('layout.footer.termsofuse')}
            </Anchor>
            <Anchor component={Link} to={`/${lang}/legal/privacy`} size="sm">
              {t('layout.footer.privacynotice')}
            </Anchor>
            <Anchor href="mailto:info@hey-germany.com" size="sm">
              {t('layout.footer.contact')}
            </Anchor>
          </Group>
        </Stack>
      </Container>
    </Box>
  )
}