@namespace Faraon.Client.Components

<div class="suit-picker-overlay">
    <div class="suit-picker-title">Zvoľte farbu (Horník)</div>
    <div class="suit-picker-grid">
        <button class="suit-btn" style="color: #d62828;" @onclick="() => SelectSuit(Suit.Hearts)">
            <div style="width: 50px; height: 50px;">
                <MariasPip Suit="Suit.Hearts" />
            </div>
            <span class="suit-btn-name">ČERVEŇ</span>
        </button>
        <button class="suit-btn" style="color: #2d6a4f;" @onclick="() => SelectSuit(Suit.Leaves)">
            <div style="width: 50px; height: 50px;">
                <MariasPip Suit="Suit.Leaves" />
            </div>
            <span class="suit-btn-name">ZELEŇ</span>
        </button>
        <button class="suit-btn" style="color: #8b5a2b;" @onclick="() => SelectSuit(Suit.Acorns)">
            <div style="width: 50px; height: 50px;">
                <MariasPip Suit="Suit.Acorns" />
            </div>
            <span class="suit-btn-name">ŽALUĎ</span>
        </button>
        <button class="suit-btn" style="color: #d48b1a;" @onclick="() => SelectSuit(Suit.Bells)">
            <div style="width: 50px; height: 50px;">
                <MariasPip Suit="Suit.Bells" />
            </div>
            <span class="suit-btn-name">GUĽA</span>
        </button>
    </div>
</div>

@code {
    [Parameter] public EventCallback<Suit> OnSuitSelected { get; set; }

    private async Task SelectSuit(Suit suit)
    {
        await OnSuitSelected.InvokeAsync(suit);
    }
}