Label

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/checkbox"
	"github.com/templui/templui/components/label"
)

templ CheckboxDefault() {
	<div class="flex flex-col gap-6">
		<!-- Basic checkbox with label -->
		<div class="flex items-center gap-3">
			@checkbox.Checkbox(checkbox.Props{
				ID:    "terms",
				Name:  "agreements",
				Value: "terms",
			})
			@label.Label(label.Props{
				For: "terms",
			}) {
				Accept terms and conditions
			}
		</div>
		<!-- Checkbox with description -->
		<div class="flex items-start gap-3">
			@checkbox.Checkbox(checkbox.Props{
				ID:      "newsletter",
				Name:    "agreements",
				Value:   "newsletter",
				Checked: true,
			})
			<div class="grid gap-2">
				@label.Label(label.Props{
					For: "newsletter",
				}) {
					Subscribe to newsletter
				}
				<p class="text-muted-foreground text-sm">
					Get notified about new features and updates.
				</p>
			</div>
		</div>
		<!-- Disabled checkbox -->
		<div class="flex items-center gap-3">
			@checkbox.Checkbox(checkbox.Props{
				ID:       "cookies",
				Name:     "agreements",
				Value:    "cookies",
				Disabled: true,
			})
			@label.Label(label.Props{
				For: "cookies",
			}) {
				Use essential cookies only
			}
		</div>
		<!-- Checkbox in a card container -->
		@label.Label(label.Props{
			For:   "premium",
			Class: "block cursor-pointer",
		}) {
			@card.Card(card.Props{
				Class: "hover:border-primary/50 has-[:checked]:ring-1 has-[:checked]:ring-primary has-[:checked]:border-primary transition-all",
			}) {
				@card.Content(card.ContentProps{
					Class: "p-3 flex items-start gap-3",
				}) {
					@checkbox.Checkbox(checkbox.Props{
						ID:    "premium",
						Name:  "agreements",
						Value: "premium",
					})
					<div class="grid gap-1.5">
						<p class="text-sm leading-none font-medium">
							Enable premium features
						</p>
						<p class="text-muted-foreground text-sm">
							Unlock advanced functionality and priority support.
						</p>
					</div>
				}
			}
		}
	</div>
}