@using Sandbox.UI
@inherits Panel

<style>
    SegmentBar {
        padding: 3px;
        background-color: rgba(0, 0, 0, 0.25);
        gap: 4px;
        flex-direction: column-reverse;
        border-top: 5px solid rgba(0, 0, 0, 0.25);
        border-bottom: 5px solid rgba(0, 0, 0, 0.25);

        .segment {
            padding: 2px;
            width: 45px;
            height: 20px;

            .inner {
                width: 100%;
                height: 100%;
            }
        }
    }
</style>

<root>
    @for ( int i = 0; i < Segments; i++ )
    {
        int idx = i;
        bool active = idx < ActiveSegments;
        <div class="segment @( active ? "active" : "" )"
             style="background-color: @( active ? Color.Hex : EmptyColor.Hex ); opacity: @( active ? "1" : "0.35" );">
            <div class="inner" />
        </div>
    }
</root>

@code
{
    [Parameter] public int Segments { get; set; } = 5;
    [Parameter] public float CurrentValue { get; set; } = 60f;
    [Parameter] public float MaxValue { get; set; } = 100f;
    [Parameter] public Color Color { get; set; } = Color.Parse( "#3a7d3a" ) ?? Color.White;

    // Neutral dark for empty slots — same for all bars
    private Color EmptyColor => new Color( 0.08f, 0.08f, 0.08f );

    private int ActiveSegments => MaxValue > 0 ? (int)MathF.Round( (CurrentValue / MaxValue) * Segments ) : 0;

    protected override int BuildHash() => HashCode.Combine( ActiveSegments );
}