import classes from './Footer.module.css';
import { Divider, Group, Text } from '@mantine/core';
import { useEffect, useState } from 'react';
import { systemInfo } from '@lib/system.ts';
import { useMediaQuery } from '@mantine/hooks';

const links = [
  { link: `/swagger/`, newTab: true, label: 'API Docs' },
  { link: '/cookies', label: 'Cookies' },
  { link: '/privacy', label: 'Privacy' },
  { link: '/terms', label: 'Terms' },
  { link: '/contact', label: 'Contact' }
];

export function Footer() {
  const [version, setVersion] = useState('0.0.0');
  const isMobile = useMediaQuery('(max-width: 768px)');
  const items = links.map((link) => (
    <a className={classes.link} key={link.label} href={link.link} target={link.newTab ? `_blank` : ''}>
      <Text size='sm'>{link.label}</Text>
    </a>
  ));

  useEffect(() => {
    systemInfo().then((info) => {
      if (info != undefined) {
        setVersion(info.version);
      }
    });
  }, []);

  return (
    <div className={classes.footer}>
      <Group className={classes.inner}>
        <Group>
          <Text size='sm'>
            API{' '}
            <a className={classes.link} href={'https://gitea.bensherriff.com/bsherriff/aviation'} target={'_blank'}>
              v{version}
            </a>
          </Text>
          <Divider orientation={'vertical'} />
          <Text size='sm'>© {new Date().getFullYear()} Aviation Data</Text>
        </Group>
        {!isMobile && (
          <Group gap='xs' justify='flex-end' wrap='nowrap'>
            {items}
          </Group>
        )}
      </Group>
    </div>
  );
}