---
/**
 * Portable Text Columns block component
 *
 * Renders multi-column layouts from WordPress imports.
 */
import { PortableText } from "astro-portabletext";

export interface Props {
	node: {
		_type: "columns";
		_key: string;
		columns: Array<{
			_type: "column";
			_key: string;
			content: unknown[];
			width?: string;
		}>;
	};
}

const { node } = Astro.props;
const columns = node?.columns ?? [];

if (!columns.length) {
	return null;
}
---

<div class="emdash-columns" style={`--column-count: ${columns.length}`}>
	{
		columns.map((column) => (
			<div
				class="emdash-column"
				style={column.width ? `flex-basis: ${column.width}` : undefined}
			>
				<PortableText value={column.content} />
			</div>
		))
	}
</div>

<style>
	.emdash-columns {
		display: flex;
		gap: 2rem;
		margin: 1.5rem 0;
	}
	.emdash-column {
		flex: 1;
		min-width: 0;
	}
	@media (max-width: 768px) {
		.emdash-columns {
			flex-direction: column;
			gap: 1rem;
		}
	}
</style>
