---
import { Icon } from "astro-icon/components";
import ImageWrapper from "@/components/common/ImageWrapper.astro";
import { profileConfig } from "@/config/profileConfig";
import { url } from "@/utils/url-utils";
---

<div class="card-base p-3">
  <a
    aria-label="Go to About Page"
    href={url("/about/")}
    class="group block relative mx-auto mt-1 lg:mx-0 lg:mt-0 mb-3
       max-w-48 lg:max-w-none overflow-hidden rounded-xl active:scale-95"
  >
    <div
      class="absolute transition pointer-events-none group-hover:bg-black/30 group-active:bg-black/50
        w-full h-full z-50 flex items-center justify-center"
    >
      <Icon
        name="fa7-regular:address-card"
        class="transition opacity-0 scale-90 group-hover:scale-100 group-hover:opacity-100 text-white text-5xl"
      />
    </div>
    <ImageWrapper
      src={profileConfig.avatar || ""}
      alt="Profile Image of the Author"
      class="mx-auto lg:w-full h-full lg:mt-0"
      loading="eager"
      fetchpriority="high"
      widths={[350]}
      sizes="350px"
    />
  </a>
  <div class="px-2">
    <div
      class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition"
    >
      {profileConfig.name}
    </div>
    <div
      class="h-1 w-5 bg-(--primary) mx-auto rounded-full mb-2 transition"
    >
    </div>
    <div class="text-center text-neutral-400 mb-2.5 transition">
      {profileConfig.bio}
    </div>
        <div class="flex flex-wrap gap-2 justify-center mb-1">
            {profileConfig.links.length > 1 && profileConfig.links.map(item =>
                    {
                    const showName = item.showName;
                    const className = showName 
                        ? "btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95" 
                        : "btn-regular rounded-lg h-10 w-10 active:scale-90";

                    if (item.url.startsWith("mailto:")) {
                        const encodedEmail = Buffer.from(item.url.replace("mailto:", "")).toString("base64");
                        return <a rel="me" aria-label={item.name} href="#" data-encoded-email={encodedEmail} onclick={`
                                            (function() {
                                                const encodedEmail = this.getAttribute('data-encoded-email');
                                                const decodedEmail = atob(encodedEmail);
                                                this.href = 'mailto:' + decodedEmail;
                                                this.removeAttribute('data-encoded-email');
                                                this.removeAttribute('onclick');
                                                this.click();
                                                return false;
                                            }).call(this);
                                        `.replace(/\s+/g, " ").trim()
                                    },
                                    class={className}>
                            <Icon name={item.icon} class="text-[1.5rem]"></Icon>
                            {showName && item.name}
                        </a>
                    } else {
                        return <a rel="me" aria-label={item.name} href={item.url} target="_blank" class={className}>
                            <Icon name={item.icon} class="text-[1.5rem]"></Icon>
                            {showName && item.name}
                        </a>
                    }
                    }
            )}
            {profileConfig.links.length == 1 && (function(item){
                if (item.url.startsWith("mailto:")) {
                        const encodedEmail = Buffer.from(item.url.replace("mailto:", "")).toString("base64");
                        return <a rel="me" aria-label={item.name} href="#" data-encoded-email={encodedEmail} onclick={`
                                            (function() {
                                                const encodedEmail = this.getAttribute('data-encoded-email');
                                                const decodedEmail = atob(encodedEmail);
                                                this.href = 'mailto:' + decodedEmail;
                                                this.removeAttribute('data-encoded-email');
                                                this.removeAttribute('onclick');
                                                this.click();
                                                return false;
                                            }).call(this);
                                        `.replace(/\s+/g, " ").trim()
                                    },
                                    class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
                            <Icon name={item.icon} class="text-[1.5rem]"></Icon>
                            {item.name}
                        </a>
                    } else {
                        return <a rel="me" aria-label={item.name} href={item.url} target="_blank"
                                            class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
                                <Icon name={item.icon} class="text-[1.5rem]"></Icon>
                                {item.name}
                            </a>
                    }
            })(profileConfig.links[0])}
        </div>
  </div>
</div>