Radio

package showcase

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

templ RadioDefault() {
	<div class="flex flex-col gap-6">
		<!-- Radio with description -->
		<div class="flex flex-col gap-3">
			<div class="flex items-start gap-3">
				@radio.Radio(radio.Props{
					ID:    "plan-1",
					Name:  "options",
					Value: "free",
				})
				<div class="grid gap-2">
					@label.Label(label.Props{
						For: "plan-1",
					}) {
						Free Plan
					}
				</div>
			</div>
			<div class="flex items-start gap-3">
				@radio.Radio(radio.Props{
					ID:      "plan-2",
					Name:    "options",
					Value:   "pro",
					Checked: true,
				})
				<div class="grid gap-2">
					@label.Label(label.Props{
						For: "plan-2",
					}) {
						Pro Plan
					}
					<p class="text-muted-foreground text-sm">
						Unlock advanced features and priority support.
					</p>
				</div>
			</div>
		</div>
		<!-- Disabled radio -->
		<div class="flex items-center gap-3">
			@radio.Radio(radio.Props{
				ID:       "enterprise-option",
				Name:     "options",
				Value:    "enterprise",
				Disabled: true,
			})
			@label.Label(label.Props{
				For: "enterprise-option",
			}) {
				Enterprise Plan (Coming Soon)
			}
		</div>
		<!-- Radio in a card-like container -->
		@label.Label(label.Props{
			For:   "card-option",
			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",
				}) {
					@radio.Radio(radio.Props{
						ID:    "card-option",
						Name:  "options",
						Value: "premium",
					})
					<div class="grid gap-1.5">
						<p class="text-sm leading-none font-medium">
							Premium Features
						</p>
						<p class="text-muted-foreground text-sm">
							Access all premium features with unlimited usage.
						</p>
					</div>
				}
			}
		}
	</div>
}