@inherits PanelComponent

<root class="interaction-panel">
	<div class="label @(IsPressed ? "pressed" : "")">@InteractionString</div>

	@if ( IsHoldInteraction )
	{
		<div class="progress-bar">
			<div class="progress-fill" style="width: @( ProgressionHold * 100 )%"></div>
		</div>
	}
</root>

<style lang="scss">
.interaction-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	transition: all 0.1s ease;
	
	.progress-bar {
		width: 100px;
		height: 8px;
		background-color: #333;
		border-radius: 4px;
		.progress-fill {
			height: 100%;
			background-color: limegreen;
			border-radius: 4px;
		}
	}

	.label {
		padding: 8px;
		border-radius: 6px;
		color: white;
		font-size: 56px;
		background-color: rgba(0, 128, 255, 0.2);
		transition: all 0.1s ease;
	}

	.label.pressed {
		background-color: rgba(0, 128, 255, 0.6);
		transform: scale(1.4);
	}
}


</style>


@code {
	[Property] public string InteractionString { get; set; } = "Interact";
	[Property] public bool IsHoldInteraction { get; set; } = false;
	[Property] public float ProgressionHold { get; set; } = 0f;
	[Property] public bool IsPressed { get; set; } = false;
	
	public void SetPressed(bool value)
	{
		IsPressed = value;
		StateHasChanged(); // << 🔁 вручную обновим UI
	}
}