Checkbox Card

package showcase

import "github.com/axzilla/templui/internal/components/icon"
import "github.com/axzilla/templui/internal/components/checkboxcard"

templ CheckboxCardDefault() {
	<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
		@checkboxcard.CheckboxCard(checkboxcard.Props{
			ID: "feature-analytics",
		},
		) {
			@checkboxcard.Header() {
				<div class="flex items-center gap-2">
					<div class="text-primary">
						@icon.ChartBar(icon.Props{Size: 20})
					</div>
					<h3>Analytics</h3>
				</div>
			}
			@checkboxcard.Description() {
				Real-time data analytics and reporting tools
			}
			@checkboxcard.Footer() {
				@radioCardPriceFooter("$5/month")
			}
		}
		@checkboxcard.CheckboxCard(checkboxcard.Props{
			ID: "feature-storage",
		},
		) {
			@checkboxcard.Header() {
				<div class="flex items-center gap-2">
					<div class="text-primary">
						@icon.Cloud(icon.Props{Size: 20})
					</div>
					<h3>Cloud Storage</h3>
				</div>
			}
			@checkboxcard.Description() {
				Secure file storage with 100GB capacity
			}
			@checkboxcard.Footer() {
				@radioCardPriceFooter("$3/month")
			}
		}
		@checkboxcard.CheckboxCard(checkboxcard.Props{
			ID:       "feature-api",
			Disabled: true,
		}) {
			@checkboxcard.Header() {
				<div class="flex items-center gap-2">
					<div class="text-primary">
						@icon.Code(icon.Props{Size: 20})
					</div>
					<h3>API Access</h3>
				</div>
			}
			@checkboxcard.Description() {
				Full access to our developer API endpoints
			}
			@checkboxcard.Footer() {
				@radioCardPriceFooter("$8/month")
			}
		}
	</div>
}