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

interface Props {
    label: string;
    href: string;
    icon: string;
}

const { label, href, icon } = Astro.props;
const navigationHandler = `window.open('${href}', '_blank')`;
---

<div class="button" onclick={navigationHandler}>
    <Icon name={icon} class="icon" />
    <a rel="noreferrer">
        {label}
    </a>
</div>

<style>
    :root {
        --transition-time: .28s;
    }

    .button {
        min-width: 130px;
        width: min(13rem, 100%);
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(18, 18, 28, 0.24);
        backdrop-filter: blur(2px);
        box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);

        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 1.8rem;

        cursor: pointer;
        transition: transform var(--transition-time), border-color var(--transition-time), background var(--transition-time), box-shadow var(--transition-time);
        gap: 0.75rem;
        padding: 0.95rem 1.2rem;
    }

    .button:hover {
        background: rgba(32, 32, 46, 0.5);
        border-color: rgba(255, 255, 255, 0.22);
        transform: translateY(-2px);
        box-shadow: 0 24px 65px rgba(0, 0, 0, 0.22);
    }

    .button:hover a {
        color: #fff;
    }

    .button a {
        text-decoration: none;
        color: #f5f2eb;
        text-align: left !important;
        width: 100%;
        height: 100%;
        border: none;
        background: transparent;
        font: inherit;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .icon {
        width: 1.2rem;
        height: 1.2rem;
        flex-shrink: 0;
        color: #f5f2eb;
    }
</style>