package examples

import "github.com/Tend-Stack/TendUI/v2026/components"

templ ExampleIcon() {
	<h3>Small details, clear actions.</h3>
	<p>Icons inherit text color and stay sharp at every size. Visible words remain the clearest way to describe an action.</p>
	<div class="cluster">
		@components.Link(components.LinkProps{Text: "Browse components", Href: "/catalog", IconBefore: components.IconSearch})
		@components.Link(components.LinkProps{Text: "Appearance", Href: "/settings", Outline: true, IconAfter: components.IconArrowRight})
		@components.Link(components.LinkProps{AriaLabel: "Browse all components", Href: "/catalog", Outline: true, IconBefore: components.IconMenu})
		@components.Button(components.ButtonProps{Text: "Upload unavailable", IconBefore: components.IconUpload, Disabled: true})
	</div>
	<p>
		@components.Icon(components.IconProps{Name: components.IconInfo, Size: components.IconSizeSmall})
		Small,
		@components.Icon(components.IconProps{Name: components.IconInfo})
		medium, and
		@components.Icon(components.IconProps{Name: components.IconInfo, Size: components.IconSizeLarge})
		large sizes follow the surrounding text scale.
	</p>
	<p>Standalone image with its own accessible label: @components.Icon(components.IconProps{Name: components.IconCheck, Label: "Complete"})</p>
	@components.Grid(components.GridProps{}) {
		for _, name := range components.IconNames() {
			<p>
				@components.Icon(components.IconProps{Name: name})
				<code>{ string(name) }</code>
			</p>
		}
	}
}