TtrpgPlayerLanding/src/components/layout/Footer.tsx

import { SITE_LINKS } from "../../data/siteContent";
import { useLocale } from "../../i18n/LocaleProvider";

import styles from "./Footer.module.css";

const FOOTER_LINK_KEYS = [
  "download",
  "buy",
  "faq",
  "enterKey",
  "support",
  "privacy",
] as const;

const FOOTER_HREFS: Record<(typeof FOOTER_LINK_KEYS)[number], string> = {
  download: SITE_LINKS.download,
  buy: SITE_LINKS.buy,
  faq: SITE_LINKS.faq,
  enterKey: SITE_LINKS.enterKey,
  support: SITE_LINKS.support,
  privacy: SITE_LINKS.privacy,
};

export function Footer() {
  const { copy } = useLocale();

  return (
    <footer className={styles.footer}>
      <div className={styles.inner}>
        <p className={styles.copy}>© TTRPGPlayer</p>
        <nav className={styles.links} aria-label={copy.footer.aria}>
          {FOOTER_LINK_KEYS.map((key) => (
            <a key={key} className={styles.link} href={FOOTER_HREFS[key]}>
              {copy.footer.links[key]}
            </a>
          ))}
        </nav>
      </div>
    </footer>
  );
}