---
import { Icon } from '@astrojs/starlight/components';
import MyIcon from './MyIcon.astro';

---

<div class="action-footer">
    <a class="action-button" href='https://github.com/tomalaforge/angular-challenges'>
        <div>Give a star</div>
        <Icon name='github' size="1rem" />
    </a>
    
    <a class="action-button button-sponsor" href='https://github.com/sponsors/tomalaforge'>
        <div>Sponsor</div>
        <MyIcon name='heart' size="1rem" color="white" />
    </a>
</div>

<style>
    .action-button {
        display: flex!important;
        justify-content: center;
        gap: 0.5em;
        align-items: center;
        border-radius: 999rem;
        color: var(--sl-color-white)!important;
        line-height: 1.1875;
        text-decoration: none;
        font-size: var(--sl-text-sm)!important;
        border: 1px solid;
        font-size: var(--sl-text-base);
        padding: 0.4rem 0.8rem;
    }

    .action-footer {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        margin-bottom: 10px;
    }

    .button-sponsor {
        background-color: red;
        border-color: red;
        color: white;
    }

</style>