---
import { Image } from "astro:assets";
import Social from "./Social.astro";
import pb from "../lib/pb";
import c from "../lib/config";


const avatarRec = await pb
  .collection("images")
  .getFirstListItem("useAsAvatar=true").catch(() => null);

const icon = avatarRec ? await pb.files.getUrl(avatarRec, avatarRec.file, { thumb: avatarRec.thumb }) : null;
const socials = await pb.collection("socials").getFullList();

const config = {
  // icon,
  socials,
  title: c.TITLE,
  description: c.DESCRIPTION,
};
---

<aside>
  <div class="p-4">
    <a href="/">
      {
        icon && (
          <Image class={"icon"} src={icon} width={10} height={10} alt={""} />
        )
      }
      <h1 class="font-bold text-2xl pt-4">{config.title}</h1></a
    >
    <p class="pt-4 max-w-[50rem] text-wrap">{config.description}</p>
    <br />
    <div class="flex flex-col">
      <h1 class="font-bold text-2xl pt-4">Socials</h1>
      <div id="socials" class="flex gap-4 columns-2 md:columns-4 pt-4">
        {
          config.socials &&
            config.socials.map((s) => (
              <Social href={s.url} text={s.name} icon={s.icon} />
            ))
        }
      </div>
      <!-- Links to Subpages -->
      <br />
      <br />
      <div class="text-2xl">
        <h1 class="font-bold text-2xl pt-4">Pages</h1>
        <div
          id="pages"
          class="flex gap-4 columns-2 md:columns-4 self-center pt-4"
        >
          <ul>
            {
              [
                { page: "Characters", url: "/characters" },
                // { page: "Comics", url: "/comics" },
              ].map((s) => (
                <a href={s.url}>
                  {/* <img src={s.icon} alt={s.name} /> */}
                  <li class="hover:underline">{s.page}</li>
                </a>
              ))
            }
          </ul>
        </div>
      </div>
    </div>
  </div>

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