package main

// codeNeonComponent renders the cyberpunk:code_neon block.
templ codeNeonComponent(data CodeNeonData) {
	<figure
		data-block="cyberpunk:code_neon"
		class="cyberpunk-code w-full my-6 rounded-lg overflow-hidden neon-edge-magenta"
		style="background-color: hsl(var(--card)); color: hsl(var(--card-foreground));"
	>
		<figcaption class="flex items-center justify-between px-4 py-2 cyberpunk-mono text-xs uppercase tracking-widest" style="background-color: hsl(var(--secondary)); color: hsl(var(--muted-foreground));">
			<span>{ data.Language }</span>
			if data.Copy {
				<button
					type="button"
					class="cyberpunk-code-copy cyberpunk-mono uppercase tracking-widest px-2 py-1 rounded"
					style="border: 1px solid hsl(var(--border)); color: hsl(var(--accent));"
					data-copy={ data.Code }
				>
					COPY
				</button>
			}
		</figcaption>
		<pre class="cyberpunk-mono overflow-x-auto p-4 text-sm leading-relaxed" style="background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);"><code class={ "language-" + data.Language }>{ data.Code }</code></pre>
	</figure>
}