@namespace Lumeo

@if (Animation == SkeletonAnimation.Wave)
{
    <style>
        @@keyframes skeleton-wave {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
    </style>
    <div class="@($"rounded-md bg-gradient-to-r from-primary/10 via-primary/5 to-primary/10 bg-[length:200%_100%] {Class}".Trim())"
         style="animation: skeleton-wave 1.5s ease-in-out infinite"
         @attributes="AdditionalAttributes"></div>
}
else
{
    <div class="@($"{AnimationClass} rounded-md bg-primary/10 {Class}".Trim())" @attributes="AdditionalAttributes"></div>
}

@code {
    [Parameter] public SkeletonAnimation Animation { get; set; } = SkeletonAnimation.Pulse;
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private string AnimationClass => Animation switch
    {
        SkeletonAnimation.Pulse => "animate-pulse",
        SkeletonAnimation.None => "",
        _ => "animate-pulse"
    };

    public enum SkeletonAnimation { Pulse, Wave, None }
}
