import { useAtomValue } from 'jotai';
import { languageState } from '../state/atoms';
import { getTranslations } from '../translations';
import styles from '../styles/components/Footer.module.scss';

export default function Footer() {
  const language = useAtomValue(languageState);
  const t = getTranslations(language);

  return (
    <footer className={styles.footer}>
      <p>
        {t.footer.designedBy}{' '}
        <a href="#home">Veikko Lintujärvi</a>{' '}
        <span className={styles.separator}>{t.footer.separator}</span>{' '}
        <span className={styles.stack}>{t.footer.stack}</span>
      </p>
    </footer>
  );
}