---
import { Image } from "astro:assets";
import config from "../../config.yaml";
import Social from "./Social.astro";
const {} = Astro.props;
---

<aside>
  <div class="p-4">
    <a href="/">
      {
        config.icon && (
          <Image
            class={"icon"}
            src={config.icon}
            alt={"Icon"}
            width={50}
            height={50}
          />
        )
      }
      <h1 class="font-bold text-2xl pt-4">{config.title}</h1></a
    >
    <p class="pt-4">{config.description}</p>
    {
      config.socials &&
        config.socials.map((s) => (
          <Social href={s.url} text={s.name} image={s.icon} alt={s.name} />
        // <a href={s.url} target="_blank" rel="noopener noreferrer">
          //   {/* <img src={s.icon} alt={s.name} /> */}
          //   <span class="">{s.name}</span>
          // </a>
        ))
    }
    <br />
    <button class="bg-gray-600 p-1 mt-4" id="nsfwButton">loading...</button>
  </div>
</aside>

<script>
  // @ts-nocheck
  import { nsfw } from "../lib/stores/nsfw";

  function toggleNsfw() {
    nsfw.set(!nsfw.get());
  }

  nsfw.subscribe((nsfw) => {
    if (nsfw) {
      document.getElementById("nsfwButton").innerText = `disable nsfw`;
    } else {
      document.getElementById("nsfwButton").innerText = `enable nsfw`;
    }
  });

  document.getElementById("nsfwButton").addEventListener("click", toggleNsfw);
</script>

<style>
  img.icon {
    width: 10rem;
    margin: 0 auto;
    object-fit: cover;
    object-position: center;
    border-radius: 100%;
  }
</style>
