---
import { Icon } from "astro-icon/components";
import t from "../i18n/es.json";
---

<footer>
  <section class="footer-content">
    <p>
      Copyright &copy; 2023-{new Date().getFullYear()} Ariel Costas Guerrero. {
        t.footer.copyright
      }
    </p>
  </section>

  <section class="footer-badges">
    <article id="footer-badge-rss">
      <Icon name="tabler:rss" />
      <a href="/blog.xml" title="RSS Feed">RSS</a>
    </article>

    <article id="footer-badge-eupl">
      <Icon name="tabler:brand-open-source" />
      <a
        href="https://github.com/arielcostas/costasdev"
        >EUPL 1.2</a
      >
    </article>

    <article id="footer-badge-cc">
      <Icon name="tabler:creative-commons" />
      <a
        href="https://github.com/arielcostas/costasdev"
        >BY-SA 4.0</a
      >
    </article>

    <article id="footer-badge-mastodon">
      <Icon name="tabler:brand-mastodon" />
      <a href="https://mastodon.social/@arielcg" rel="me noopener noreferrer">@arielcg</a>
    </article>
  </section>
</footer>

<style lang="scss">
  @use "../../styles/variables" as *;

  footer {
    background: #222;
    color: #ccc;
    font-size: 0.9rem;
    border-top: 1px solid #000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

    vertical-align: middle;
    text-align: center;

    padding: 1.5rem 1rem;

    .footer-content {
      max-width: 900px;
      margin: 0 auto;

      a {
        color: $accentLight;
      }
      p {
        margin-inline: auto;
        margin-block: 0 0.5rem;
      }
    }
  }

  .footer-badges {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;

    article {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.25rem;
      min-width: 67px;
      height: 33px;
      border-radius: 3px;
      padding: 0 0.5rem;

      a, span {
        color: currentColor;
        font-weight: 600;
        text-decoration: none;
        box-shadow: none !important;
      }

      svg {
        width: 1.2rem;
        height: 1.2rem;
        color: currentColor;
      }
    }

    #footer-badge-rss {
      background: linear-gradient(to bottom, orangered, red);
      color: white;
    }

    #footer-badge-eupl {
      background: linear-gradient(to bottom, blue, navy);
      color: gold;
    }

    #footer-badge-cc {
      background-color: black;
      background: linear-gradient(to bottom, #333, #000);
      color: white;
    }

    #footer-badge-mastodon {
      background: linear-gradient(to bottom, #6364ff, #563acc);
      color: white;
    }
  }
</style>