---
import Icon from 'astro-iconify'
import { footerLinks as links } from '../constants/links'
const year = new Date().getFullYear()
---

<footer>
  <ul id="internal-links">
    <li>
      <a href="/about">About me</a>
    </li>
    <li>
      <a href="/now">What I'm up to</a>
    </li>
    <li>
      <a href="/threads">My thoughts</a>
    </li>
  </ul>
  <ul>
    {
      links.map((linkObj) => (
        <li title={linkObj.text}>
          <a href={linkObj.url}>
            <Icon pack={linkObj.set ?? 'simple-icons'} name={linkObj.icon} />
          </a>
        </li>
      ))
    }
  </ul>
  <p>
    Copyright &#169; 2022-{year}
    <a href="/">Ayo Ayco</a>. This website <a
      href="https://ayos.blog/stopped-tracking-on-my-sites"
      >does not track users</a
    >. See the <a href="https://sr.ht/~ayoayco/personal-site">source code</a>.
  </p>
</footer>

<style>
  footer {
    padding: 0;
    p {
      font-size: var(--font-size-sm);
    }

    a {
      color: var(--text-color-dark);
      &:hover {
        color: var(--color-brand-blue-5);
      }

      @media (prefers-color-scheme: dark) {
        color: var(--text-color-light);
        &:hover {
          color: var(--color-brand-complement);
        }
      }
    }

    ul {
      list-style: none;
      padding: 0;

      li {
        display: inline-block;

        a svg {
          width: 1.5rem;
          margin-right: 1em;
        }
      }
    }

    #internal-links li {
      &:not(:last-child)::after {
        content: ' • ';
      }
    }

    p,
    ul {
      margin: 0;
      line-height: 2em;
    }
  }
</style>