package main

// ctaTerminalComponent renders the cyberpunk:cta_terminal block as a faux terminal prompt.
templ ctaTerminalComponent(data CTATerminalData) {
	<section
		data-block="cyberpunk:cta_terminal"
		class="cyberpunk-cta-terminal w-full py-16"
		style="background-color: hsl(var(--card));"
	>
		<div class="max-w-4xl mx-auto px-4">
			<div
				class="cyberpunk-mono rounded-lg p-6 md:p-8 flex flex-col md:flex-row items-stretch md:items-center gap-4"
				style="background-color: hsl(var(--background)); border: 1px dashed hsl(var(--primary));"
			>
				<div class="flex-1 flex items-center gap-2 text-base md:text-lg overflow-hidden">
					<span aria-hidden="true" style="color: hsl(var(--accent));">$</span>
					<code class="cyberpunk-mono whitespace-pre-wrap break-all" style="color: hsl(var(--foreground));" data-caret-blink>
						{ data.Prompt }
					</code>
					<span aria-hidden="true" class="caret-blink" data-caret-blink style="color: hsl(var(--primary));">▍</span>
				</div>
				if data.Button != "" {
					<a
						href={ templ.SafeURL(safeHref(data.Href)) }
						class="cyberpunk-btn rgb-split cyberpunk-mono inline-flex items-center justify-center gap-2 px-4 py-2 rounded-md font-semibold uppercase tracking-wider"
						style="background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground));"
						if data.Copyable {
							data-copy={ data.Prompt }
						}
					>
						{ data.Button }
					</a>
				}
			</div>
		</div>
	</section>
}