package register

import (
	"github.com/labstack/echo/v4"
	"github.com/onsonr/sonr/pkg/nebula/components/blocks"
	"github.com/onsonr/sonr/pkg/nebula/models/formstate"
)

templ View(c echo.Context) {
	@blocks.Layout("Sonr.ID", true) {
		@blocks.Card("register-view", blocks.SizeMedium) {
			@blocks.Spacer()
			@blocks.Breadcrumbs()
			@basicInfoForm(formstate.Initial)
			@blocks.Spacer()
		}
	}
}

templ basicInfoForm(state formstate.FormState) {
	switch (state) {
		default:
			<div class="border rounded-lg shadow-sm bg-card text-zinc-900">
				<div class="flex flex-col space-y-1.5 p-6"></div>
				<div class="p-6 pt-0 space-y-2">
					<div class="space-y-1"><label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="name">Name</label><input type="text" id="name" placeholder="Adam Wathan" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/></div>
					<div class="space-y-1"><label class="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="username">Handle</label><input type="text" id="handle" placeholder="angelo.snr" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md peer border-zinc-300 ring-offset-background placeholder:text-zinc-400 focus:border-zinc-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"/></div>
				</div>
			</div>
	}
}