---
import { Icon } from "astro-icon/components";

import { type NavbarLink } from "@/types/config";
import { url } from "@utils/url";


interface Props {
    link: NavbarLink;
    class?: string;
}

const { link, class: className } = Astro.props;
---

<div class:list={["nav-link-container", className]}>
    <a
        aria-label={link.name}
        href={link.external ? link.url : url(link.url)}
        target={link.external ? "_blank" : null}
        class="btn-plain scale-animation rounded-lg h-11 font-bold px-3 active:scale-95 nav-link-item"
        data-link-name={link.name}
    >
        <div class="flex items-center">
            {link.icon && <Icon name={link.icon} class="text-[1.1rem] nav-link-icon" />}
            <span class="nav-link-text ml-2 hidden lg:inline">{link.name}</span>
            {link.external && <Icon name="fa6-solid:arrow-up-right-from-square" class="text-[0.875rem] transition -translate-y-px ml-1 text-black/20 dark:text-white/20" />}
        </div>
    </a>
</div>