@inherits DComponentBase

@* daisyUI Hero: https://daisyui.com/components/hero/ . ChildContent goes in hero-content (text, and optionally a
   figure); with Overlay a hero-overlay tints the background image. *@
<div @attributes="AdditionalAttributes" class="@CssClass" style="@StyleValue">
	@if (Overlay)
	{
		<div class="@Cx("hero-overlay", OverlayClass)"></div>
	}
	<div class="@Cx("hero-content", ContentClass)">
		@ChildContent
	</div>
</div>

@code {
	[Parameter] public RenderFragment ChildContent { get; set; }
	/// <summary>URL of a background image, set as an inline background-image.</summary>
	[Parameter] public string BackgroundImage { get; set; }
	/// <summary>Add a hero-overlay color layer above the background image.</summary>
	[Parameter] public bool Overlay { get; set; }
	[Parameter] public string OverlayClass { get; set; }
	/// <summary>Classes for hero-content, e.g. "text-center" or "flex-col lg:flex-row".</summary>
	[Parameter] public string ContentClass { get; set; }

	string CssClass => Cx("hero", Class);

	// The consumer's own style attribute is kept, after the background image.
	string StyleValue
	{
		get
		{
			var style = AdditionalAttributes?.GetValueOrDefault("style")?.ToString();
			return BackgroundImage is null ? style : Cx($"background-image: url('{BackgroundImage}');", style);
		}
	}
}