Radio Card

package showcase

import (
	"github.com/axzilla/templui/internal/components/icon"
	"github.com/axzilla/templui/internal/components/radiocard"
)

templ RadioCardDefault() {
	<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
		@radiocard.RadioCard(radiocard.Props{
			ID:    "comp-plan-basic",
			Name:  "comp-plan",
			Value: "basic",
		}) {
			@radiocard.Header() {
				<div class="flex items-center gap-2">
					@icon.Package(icon.Props{Size: 20})
					<h3>Basic Plan</h3>
				</div>
			}
			@radiocard.Description() {
				Essential features for individuals and small teams
			}
			@radiocard.Footer() {
				@radioCardPriceFooter("$5.99")
			}
		}
		@radiocard.RadioCard(radiocard.Props{
			ID:    "comp-plan-pro",
			Name:  "comp-plan",
			Value: "pro",
		}) {
			@radiocard.Header() {
				<div class="flex items-center gap-2">
					@icon.Star(icon.Props{Size: 20})
					<h3>Pro Plan</h3>
				</div>
			}
			@radiocard.Description() {
				Enhanced capabilities for growing businesses.
			}
			@radiocard.Footer() {
				@radioCardPriceFooter("$14.99")
			}
		}
		@radiocard.RadioCard(radiocard.Props{
			ID:       "comp-plan-enterprise",
			Name:     "comp-plan",
			Value:    "enterprise",
			Disabled: true,
		}) {
			@radiocard.Header() {
				<div class="flex items-center gap-2">
					@icon.Building(icon.Props{Size: 20})
					<h3>Enterprise Plan</h3>
				</div>
			}
			@radiocard.Description() {
				Advanced features for large organizations
			}
			@radiocard.Footer() {
				@radioCardPriceFooter("$29.99")
			}
		}
	</div>
}

templ radioCardPriceFooter(price string) {
	<div class="flex justify-between items-center border-t border-border pt-2 mt-2 text-sm">
		<span class="text-muted-foreground">Price</span>
		<span class="font-medium">{ price }</span>
	</div>
}