---
export interface Props {
	currentPage?: string;
    link: string;
    text: string;
    icon: string;
}

const {icon, text, link, currentPage } = Astro.props;

let currPage = "";
const slug = link.replace(new RegExp('/', 'g'), "")

if (currentPage === slug) {
    currPage = "current"
} else if (currentPage === "home" && link === "/") {
    currPage = "current"
}

const fulllink = `${Astro.site}/${slug}`;
---

<li>
    <a href={fulllink} rel="noopener noreferrer" aria-label={text} class={currPage}>
        <i class={icon}></i>
        {text}
    </a>
</li>

<style>
    li {
        align-items: center;
        justify-content: center;
        text-align: left;
        display: flex;
        width: 200px;
    }
    li > a {
        color: white;
        text-decoration: none;
        justify-content: center;
        align-items: center;
        font-size: 1.4em;
        height: 100%;
        font-weight: bold;
    }
    li > a:hover{
        color: #551a8b;
    }
    .current {
        color: #b86cffed;
    }
</style>