@inherits DComponentBase

@* daisyUI Countdown: https://daisyui.com/components/countdown/ . Shows one number (0-999) that rolls to each new
   Value; --value and --digits go in the inner span's style. For a clock, put several side by side with separators. *@
<span @attributes="AdditionalAttributes" class="@Cx("countdown", Class)">
	<span style="@ValueStyle" aria-live="polite" aria-label="@Number">@Number</span>
</span>

@code {
	/// <summary>The number to show, clamped to 0-999.</summary>
	[Parameter] public int Value { get; set; }
	/// <summary>Minimum digits shown (1-3); 2 pads 5 to 05.</summary>
	[Parameter] public int Digits { get; set; } = 1;

	int Number => Math.Clamp(Value, 0, 999);

	string ValueStyle => Digits > 1 ? $"--value:{Number}; --digits:{Math.Min(Digits, 3)};" : $"--value:{Number};";
}