---
import { Icon } from 'astro-icon/components'
import { footerLinks as links } from '../constants/links'
import WebRings from './WebRings.astro'
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
            class:list={[
              {
                'u-url': !linkObj.excludeHCard,
              },
            ]}
            rel={!linkObj.excludeHCard ? 'me' : null}
            href={linkObj.url}
            aria-label={linkObj.text}
          >
            <Icon
              width="1em"
              height="1em"
              name={`${linkObj.set ?? 'simple-icons'}:${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://git.sr.ht/~ayoayco/ayco.io-astro"
      >source code.</a
    >
  </p>

  <WebRings />
</footer>

<style>
  footer {
    padding: 1em;
    display: grid;
    gap: 1em;
    grid-auto-flow: row;

    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 {
          margin-right: 1em;
        }
      }
    }

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

    p,
    ul {
      margin: 0;
    }
  }
</style>