package site

import (
	"fmt"
	"github.com/go-faker/faker/v4"
	datastar "github.com/starfederation/datastar/sdk/go"
)

templ setupExamplesLazyTabsContent() {
	<p>{ faker.Paragraph() }</p>
	<p>{ faker.Paragraph() }</p>
	<p>{ faker.Paragraph() }</p>
	<p>{ faker.Paragraph() }</p>
	<p>{ faker.Paragraph() }</p>
}

type LazyTabsSignals struct {
	TabID int `json:"tabId"`
}

templ setupExamplesLazyTabsComponent(tabCount int, contents templ.Component, signals *LazyTabsSignals) {
	<div id="lazy_tabs" data-signals={ templ.JSONString(signals) } class="flex flex-col">
		<div id="tabButtons" role="tablist" class="tabs tabs-bordered">
			for i := 0; i < tabCount; i++ {
				<button
					id={ fmt.Sprintf("tabBtn%d", i) }
					role="tab"
					class={ "tab", templ.KV("tab-active", i == signals.TabID) }
					data-on-click={ fmt.Sprintf(
						"tabId.value=%d;%s", i,
						datastar.GetSSE("/examples/lazy_tabs/data"),
					) }
					data-testid={ fmt.Sprintf("tab_%d", i) }
				>
					Tab { fmt.Sprint(i) }
				</button>
			}
		</div>
		<div id="tab_content" class="p-4 shadow-lg bg-base-200">
			@contents
		</div>
	</div>
}