---
import ImageBox from "../misc/ImageBox.astro";
import Button from "../control/Button.astro";
import {Icon} from "astro-icon/components";
import {profileConfig} from "../../config";
interface props {

}
const className = Astro.props

const config = profileConfig;

---
<div class="card-base">
    <a aria-label="Go to About Page" href="/about" class="group block relative mx-auto mt-4 lg:mx-3 lg:mt-3 mb-3 max-w-[240px] 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="fa6-regular:address-card"
                  class="transition opacity-0 group-hover:opacity-100 text-white text-5xl">
            </Icon>
        </div>
        <ImageBox src={config.avatar} alt="Profile Image of the Author" class="mx-auto lg:w-full h-full lg:mt-0 "></ImageBox>
    </a>
    <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
    <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
    <div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
    <div class="flex gap-2 mx-2 justify-center mb-4">
        {config.links.map(item =>
            <a aria-label={item.name} href={item.url} target="_blank">
                <Button isIcon iconName={item.icon} regular height="40px" class="rounded-lg active:scale-90"></Button>
            </a>
        )}
    </div>
</div>