package main

import (
	"fmt"

	g "maragu.dev/gomponents"
	c "maragu.dev/gomponents/components"
	h "maragu.dev/gomponents/html"
)

func index(links []Link) g.Node {
	return c.HTML5(c.HTML5Props{
		Title: "jolheiser",
		Head: []g.Node{
			// title, charset, and viewport are already set by HTML5
			h.Link(h.Rel("shortcut icon"), h.Href("https://www.gravatar.com/avatar/7f4dd86f017ff289cf05a013e22357ef253d1ed6a52bdefca8f965af1080a965?s=16")),
			h.Meta(h.Name("author"), h.Content("jolheiser")),
			h.Link(h.Rel("stylesheet"), h.Href("styles.css")),
		},
		Body: []g.Node{
			h.Class("latte dark:mocha bg-base"),
			h.Header(h.Class("relative w-full pt-16 pb-10"),
				h.Img(h.Class("mx-auto rounded-full"), h.Alt("avatar"), h.Src("https://www.gravatar.com/avatar/7f4dd86f017ff289cf05a013e22357ef253d1ed6a52bdefca8f965af1080a965?s=125")),
				h.P(h.Class("mt-2 text-xl text-center text-lavender"),
					g.Text("@jolheiser"),
				),
			),
			h.Nav(h.Class("relative max-w-screen-sm mx-auto"),
				g.Map(links, func(link Link) g.Node {
					return h.A(h.Class("flex relative px-3 py-2 my-6 h-16 text-lg items-center justify-center text-text bg-surface0 cursor-pointer rounded border-solid border-2 border-overlay0 hover:bg-surface2 hover:border-lavender hover:text-blue transition"), h.Title(link.Name), h.Target("_blank"), h.Href(link.URL),
						h.SVG(h.Class("absolute left-5 w-10 h-10"), h.Role("img"), ViewBox(0, 0, 24, 24), XMLNS(),
							h.Title(link.Icon().Title),
							Path(Fill("#"+link.Icon().Hex), D(link.Icon().Path)),
						),
						h.Span(g.Text(link.Name)),
					)
				}),
			),
		},
	})
}

func ViewBox(minX, minY, width, height int) g.Node {
	return g.Attr("viewBox", fmt.Sprintf("%d %d %d %d", minX, minY, width, height))
}

func XMLNS() g.Node {
	return g.Attr("xmlns", "http://www.w3.org/2000/svg")
}

func Path(children ...g.Node) g.Node {
	return g.El("path", children...)
}

func Fill(fill string) g.Node {
	return g.Attr("fill", fill)
}

func D(d string) g.Node {
	return g.Attr("d", d)
}