Switch

package showcase

import (
	"github.com/templui/templui/components/card"
	"github.com/templui/templui/components/label"
	// "switch" is a reserved Go keyword, so we use an alias
	switchcomp "github.com/templui/templui/components/switch"
)

templ SwitchDefault() {
	<div class="flex flex-col gap-6">
		<!-- Basic switch -->
		<div class="flex items-center gap-2">
			@switchcomp.Switch(switchcomp.Props{
				ID: "airplane-mode",
			})
			@label.Label(label.Props{
				For: "airplane-mode",
			}) {
				Airplane Mode
			}
		</div>
		<!-- Switch with description -->
		<div class="flex items-start gap-3">
			@switchcomp.Switch(switchcomp.Props{
				ID:      "marketing",
				Checked: true,
			})
			<div class="grid gap-1.5 leading-none">
				@label.Label(label.Props{
					For: "marketing",
				}) {
					Marketing emails
				}
				<p class="text-sm text-muted-foreground">
					Receive emails about new products, features, and more.
				</p>
			</div>
		</div>
		<!-- Disabled switch -->
		<div class="flex items-center gap-2">
			@switchcomp.Switch(switchcomp.Props{
				ID:       "disabled",
				Disabled: true,
			})
			@label.Label(label.Props{
				For:   "disabled",
				Class: "opacity-50",
			}) {
				Disabled Switch
			}
		</div>
		<!-- Switch in a card (Settings-like) -->
		@label.Label(label.Props{
			For:   "notifications",
			Class: "block cursor-pointer",
		}) {
			@card.Card(card.Props{
				Class: "hover:bg-muted/50 transition-colors",
			}) {
				@card.Content(card.ContentProps{
					Class: "flex items-center justify-between p-4",
				}) {
					<div class="space-y-0.5">
						<div class="text-sm font-medium">Push Notifications</div>
						<div class="text-sm text-muted-foreground">
							Receive notifications about your account activity.
						</div>
					</div>
					@switchcomp.Switch(switchcomp.Props{
						ID: "notifications",
					})
				}
			}
		}
	</div>
}