---
/**
 * Portable Text Code block component
 *
 * Renders code blocks with optional syntax highlighting class.
 */
export interface Props {
	node: {
		_type: "code";
		_key: string;
		code: string;
		language?: string;
		filename?: string;
	};
}

const { node } = Astro.props;

if (!node?.code) {
	return null;
}

const { code, language, filename } = node;
const languageClass = language ? `language-${language}` : "";
---

<div class="emdash-code">
	{filename && <div class="emdash-code-filename">{filename}</div>}
	<pre class={languageClass}><code class={languageClass}>{code}</code></pre>
</div>

<style>
	.emdash-code {
		margin: 1.5rem 0;
	}
	.emdash-code-filename {
		font-size: 0.75rem;
		font-family: monospace;
		background: #2d2d2d;
		color: #ccc;
		padding: 0.5rem 1rem;
		border-radius: 0.5rem 0.5rem 0 0;
	}
	.emdash-code pre {
		margin: 0;
		padding: 1rem;
		background: #1e1e1e;
		border-radius: 0.5rem;
		overflow-x: auto;
	}
	.emdash-code-filename + pre {
		border-radius: 0 0 0.5rem 0.5rem;
	}
	.emdash-code code {
		font-family: "Fira Code", "Consolas", monospace;
		font-size: 0.875rem;
		color: #e0e0e0;
	}
</style>
