package wallet

import "github.com/onsonr/sonr/pkg/common/styles/layout"

templ DepositFundsView() {
	@layout.Root("Sonr.ID") {
		<div class="flex fixed inset-0 z-[99] w-screen h-screen bg-white">
			<div class="relative flex flex-wrap items-center w-full h-full px-8">
				<div class="relative w-full max-w-sm mx-auto lg:mb-0">
					<div class="flex flex-col items-center justify-center h-full">
						<div class="flex flex-col items-center justify-center h-full">
							<h1 class="text-3xl font-bold text-zinc-900 mb-4">
								Sonr.ID
							</h1>
							<p class="text-lg text-zinc-500">
								The decentralized identity layer for the web.
							</p>
						</div>
						<div class="flex flex-col items-center justify-center h-full">
							<button class="btn btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow">
								Get Started
							</button>
						</div>
					</div>
					{ children... }
				</div>
			</div>
		</div>
	}
}

templ SwapTokensView() {
	@layout.Root("Sonr.ID") {
		<div class="flex fixed inset-0 z-[99] w-screen h-screen bg-white">
			<div class="relative flex flex-wrap items-center w-full h-full px-8">
				<div class="relative w-full max-w-sm mx-auto lg:mb-0">
					<div class="flex flex-col items-center justify-center h-full">
						<div class="flex flex-col items-center justify-center h-full">
							<h1 class="text-3xl font-bold text-zinc-900 mb-4">
								Sonr.ID
							</h1>
							<p class="text-lg text-zinc-500">
								The decentralized identity layer for the web.
							</p>
						</div>
						<div class="flex flex-col items-center justify-center h-full">
							<button class="btn btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow">
								Get Started
							</button>
						</div>
					</div>
					{ children... }
				</div>
			</div>
		</div>
	}
}

templ ConfirmPasscodeView() {
	@layout.Root("Sonr.ID") {
		<div class="flex fixed inset-0 z-[99] w-screen h-screen bg-white">
			<div class="relative flex flex-wrap items-center w-full h-full px-8">
				<div class="relative w-full max-w-sm mx-auto lg:mb-0">
					<div class="flex flex-col items-center justify-center h-full">
						<div class="flex flex-col items-center justify-center h-full">
							<h1 class="text-3xl font-bold text-zinc-900 mb-4">
								Sonr.ID
							</h1>
							<p class="text-lg text-zinc-500">
								The decentralized identity layer for the web.
							</p>
						</div>
						<div class="flex flex-col items-center justify-center h-full">
							<button class="btn btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow">
								Get Started
							</button>
						</div>
					</div>
					{ children... }
				</div>
			</div>
		</div>
	}
}

templ TransferTokensView() {
	@layout.Root("Sonr.ID") {
		<div class="flex fixed inset-0 z-[99] w-screen h-screen bg-white">
			<div class="relative flex flex-wrap items-center w-full h-full px-8">
				<div class="relative w-full max-w-sm mx-auto lg:mb-0">
					<div class="flex flex-col items-center justify-center h-full">
						<div class="flex flex-col items-center justify-center h-full">
							<h1 class="text-3xl font-bold text-zinc-900 mb-4">
								Welcome Back!
							</h1>
							<p class="text-lg text-zinc-500">
								Continue with your existing Sonr.ID.
							</p>
						</div>
						<div class="flex flex-col items-center justify-center h-full">
							<button class="btn btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow">
								Login
							</button>
						</div>
					</div>
					{ children... }
				</div>
			</div>
		</div>
	}
}