package pages

import (
	"maot-shortner/web/templates/components/button"
	"maot-shortner/web/templates/components/icon"
	"maot-shortner/web/templates/components/input"
	"maot-shortner/web/templates/layouts"
)

templ Home() {
	@layouts.MainLayout() {
		<div class="h-full flex justify-center items-center flex-col">
			@icon.Link(icon.Props{Class: "w-24 h-24"})
			<h2 class="text-4xl font-bold py-4">shorten your urls...</h2>
			<div class="flex gap-4 items-center justify-center mt-4 px-4 w-full max-w-2xl">
				@input.Input(input.Props{
					ID:          "URL",
					Type:        input.TypeURL,
					Placeholder: "https://very-long-url.com/",
				})
				@button.Button(button.Props{
					ID:      "Shorten",
					Variant: button.VariantGhost,
					Type:    button.TypeSubmit,
				}) {
					@icon.Send(icon.Props{Size: 20})
				}
			</div>
			<div id="toast-container"></div>
		</div>
	}
}