@namespace Lumeo

<div class="@CssClass" @attributes="AdditionalAttributes">
    @if (Context.Orientation == Carousel.CarouselOrientation.Horizontal)
    {
        <div id="@Context.ContentId"
             class="flex -ms-4"
             style="overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none;">
            @ChildContent
        </div>
    }
    else
    {
        <div id="@Context.ContentId"
             class="flex flex-col -mt-4"
             style="overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none;">
            @ChildContent
        </div>
    }
</div>

@code {
    [CascadingParameter] public Carousel.CarouselContext Context { get; set; } = default!;
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private string CssClass => $"overflow-hidden {Class}".Trim();
}
