export default function ({ comp }: Lume.Data) {
  const iconStyle = {
    filter: "var(--filter-fg)",
  };

  return (
    <footer className="page-footer">
      {comp.separator()}
      <div className="social-links">
        <a href="https://code.fosterhangdaan.com/foster" title="Forgejo">
          <img
            src="https://static.fosterhangdaan.com/icons/simple-icons/v10.2.0/forgejo.svg"
            className="icon"
            style={iconStyle}
            alt="forgejo"
          />
        </a>
        <a href="mailto:foster@hangdaan.email" title="eMail">
          <img
            src="https://static.fosterhangdaan.com/icons/tabler-icons/v2.47.0/svg/mail-filled.svg"
            className="icon"
            style={iconStyle}
            alt="e-mail"
          />
        </a>
        <a href="https://pay.fosterhangdaan.com" title="Donate">
          <img
            src="https://static.fosterhangdaan.com/icons/tabler-icons/v2.47.0/svg/heart-dollar.svg"
            className="icon"
            style={iconStyle}
            alt="donate"
          />
        </a>
        <a href="https://www.fosterhangdaan.com/blog/feed.rss" title="RSS Feed">
          <img
            src="https://static.fosterhangdaan.com/icons/tabler-icons/v2.47.0/svg/rss.svg"
            className="icon"
            style={iconStyle}
            alt="rss"
          />
        </a>
        <a
          href="https://www.fosterhangdaan.com/blog/feed.json"
          title="JSON Feed"
        >
          <img
            src="https://static.fosterhangdaan.com/icons/tabler-icons/v2.47.0/svg/braces.svg"
            className="icon"
            style={iconStyle}
            alt="json feed"
          />
        </a>
      </div>
      <p>Copyright &copy; 2023 Foster Hangdaan</p>
      <div className="meta">
        <a href="https://code.fosterhangdaan.com/foster/website">Source</a>
        <a href="https://code.fosterhangdaan.com/foster/website/src/branch/trunk/LICENSE.md">
          License
        </a>
      </div>
    </footer>
  );
}