---
/**
 * CodeCard — dark cosmic terminal pane (v3 design system).
 *
 *   <CodeCard lang="bash" meta="bash · 5 lines" code={`...`} />
 *
 * The `code` prop is dumped raw via set:html so MDX never sees its contents,
 * which means template-string newlines (including blank lines) and HTML token
 * spans (`<span class="tk-k">`, `<span class="tk-s">` …) come through intact.
 *
 *   • Use \\u00a0 / &nbsp; if you need preserved whitespace.
 *   • Wrap keywords with <span class="tk-k">…</span>, strings with tk-s, etc.
 *
 * Tabs is an array — first entry is the active one. `meta` is the right-hand
 * caption ("php · 9 lines"). Line numbers in the gutter are auto-derived from
 * the `code` newline count.
 */
interface Props {
	tabs?: string[];
	lang?: string;
	meta?: string;
	code: string;
	startLine?: number;
}

const {
	tabs,
	lang = 'bash',
	meta,
	code,
	startLine = 1,
} = Astro.props as Props;

const tabLabels = tabs && tabs.length ? tabs : [lang];
const lineCount = code.split('\n').length;
const gutter = Array.from({ length: lineCount }, (_, i) => `${startLine + i}`.padStart(2, ' ')).join('\n');
const metaLabel = meta ?? `${lang} · ${lineCount} line${lineCount === 1 ? '' : 's'}`;
---

<div class="code-card">
	<div class="code-card__head">
		<div class="code-card__tabs">
			{tabLabels.map((label, i) => (
				<span class={`code-card__tab${i === 0 ? ' is-active' : ''}`}>{label}</span>
			))}
		</div>
		<div class="code-card__meta">{metaLabel}</div>
	</div>
	<div class="code-card__body">
		<pre class="code-card__gutter" aria-hidden="true">{gutter}</pre>
		<pre class="code-card__pre" set:html={code} />
	</div>
</div>
