package main

// cyberpunkHeadingBaseClass returns default Tailwind classes for each heading level.
func cyberpunkHeadingBaseClass(level int) string {
	switch level {
	case 1:
		return "text-4xl md:text-5xl font-bold tracking-tight"
	case 2:
		return "text-3xl md:text-4xl font-semibold tracking-tight"
	case 3:
		return "text-2xl font-semibold"
	case 4:
		return "text-xl font-semibold"
	case 5:
		return "text-lg font-medium"
	case 6:
		return "text-base font-medium"
	default:
		return "text-3xl font-semibold tracking-tight"
	}
}

// cyberpunkHeadingComponent renders the override for the built-in heading block.
// H1 and H2 get the .glitch class which gives them the RGB-split text-shadow.
// H3-H6 get the mono small-caps eyebrow class.
templ cyberpunkHeadingComponent(level int, text, textClass string) {
	switch level {
		case 1:
			<h1
				class={ "cyberpunk-display glitch", cyberpunkHeadingBaseClass(1), textClass }
				data-text={ text }
				style="color: hsl(var(--foreground)); font-family: var(--font-heading, 'Space Grotesk', system-ui, sans-serif);"
			>
				{ text }
			</h1>
		case 2:
			<h2
				class={ "cyberpunk-display glitch", cyberpunkHeadingBaseClass(2), textClass }
				data-text={ text }
				style="color: hsl(var(--foreground)); font-family: var(--font-heading, 'Space Grotesk', system-ui, sans-serif);"
			>
				{ text }
			</h2>
		case 3:
			<h3
				class={ "cyberpunk-display", cyberpunkHeadingBaseClass(3), textClass }
				style="color: hsl(var(--foreground)); font-family: var(--font-heading, 'Space Grotesk', system-ui, sans-serif);"
			>
				{ text }
			</h3>
		case 4:
			<h4
				class={ "cyberpunk-eyebrow cyberpunk-mono uppercase tracking-widest", cyberpunkHeadingBaseClass(4), textClass }
				style="color: hsl(var(--accent));"
			>
				{ text }
			</h4>
		case 5:
			<h5
				class={ "cyberpunk-eyebrow cyberpunk-mono uppercase tracking-widest", cyberpunkHeadingBaseClass(5), textClass }
				style="color: hsl(var(--accent));"
			>
				{ text }
			</h5>
		case 6:
			<h6
				class={ "cyberpunk-eyebrow cyberpunk-mono uppercase tracking-widest", cyberpunkHeadingBaseClass(6), textClass }
				style="color: hsl(var(--accent));"
			>
				{ text }
			</h6>
		default:
			<h2
				class={ "cyberpunk-display glitch", cyberpunkHeadingBaseClass(2), textClass }
				data-text={ text }
				style="color: hsl(var(--foreground)); font-family: var(--font-heading, 'Space Grotesk', system-ui, sans-serif);"
			>
				{ text }
			</h2>
	}
}