package blocks

import "strings"

type Icon interface {
	Render() templ.Component
}

type Variant interface {
	Attributes() templ.Attributes
}

func clsxMerge(variants ...Variant) templ.Attributes {
	combinedAttrs := templ.Attributes{}
	var classElements []string

	for _, variant := range variants {
		attrs := variant.Attributes()
		if class, ok := attrs["class"].(string); ok {
			classElements = append(classElements, strings.Fields(class)...)
		}
		for key, value := range attrs {
			if key != "class" {
				combinedAttrs[key] = value
			}
		}
	}

	if len(classElements) > 0 {
		combinedAttrs["class"] = strings.Join(classElements, " ")
	}
	return combinedAttrs
}

func clsxBuilder(classes ...string) templ.Attributes {
	if len(classes) == 0 {
		return templ.Attributes{}
	}
	class := strings.Join(classes, " ")
	return templ.Attributes{
		"class": class,
	}
}

templ Spacer() {
	<br/>
}

templ ServiceWorker(path string) {
	<script>
	  navigator.serviceWorker.register({ path })
  </script>
}

templ defaultStyles() {
	<meta charset="UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<script src="https://cdn.sonr.io/js/htmx.min.js"></script>
	<link href="https://cdn.sonr.io/stylesheet.css" rel="stylesheet"/>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/alpinejs" defer></script>
	<style>[x-cloak]{display:none}</style>
	<style>font-family: R-Flex, system-ui, Inter, Helvetica, Arial, sans-serif;</style>
}

templ Rows() {
	<div class="flex flex-row w-full gap-2 md:gap-4">
		{ children... }
	</div>
}

templ Columns() {
	<div class="flex flex-col h-full w-full gap-3 md:gap-6 md:flex-row">
		{ children... }
	</div>
}

css main() {
	font-family: R-Flex, system-ui, Avenir, Helvetica, Arial, sans-serif;
}