@inject IStringLocalizerFactory LocalizerFactory
@using Microsoft.Extensions.Localization

<div class="max-w-2xl mx-auto px-4 lg:mt-8">
    <div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800">
        <h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">@Localizer["Title"]</h3>
        <div class="text-sm text-gray-600 dark:text-gray-400 mb-4">
            @Localizer["Description"]
        </div>
        <div class="bg-primary-100 border-l-4 border-primary-500 text-primary-700 p-4 mb-4 dark:bg-gray-700 dark:border-primary-500 dark:text-gray-200">
            <p class="font-semibold">
                @Localizer["WarningTitle"]
            </p>
            <p>
                @Localizer["WarningDescription"]
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-2" id="recovery-codes">
            @foreach (var recoveryCode in RecoveryCodes)
            {
                <div>
                    <code class="block p-3 bg-gray-100 dark:bg-gray-700 dark:text-gray-200 rounded border font-mono text-center">@recoveryCode</code>
                </div>
            }
        </div>
    </div>
</div>

@code {
    private IStringLocalizer Localizer => LocalizerFactory.Create("Components.Main.Settings.Security.ShowRecoveryCodes", "AliasVault.Client");

    /// <summary>
    /// The recovery codes to show.
    /// </summary>
    [Parameter]
    public string[] RecoveryCodes { get; set; } = [];
}
