---
/**
 * Portable Text Break/Separator block component
 *
 * Renders horizontal rules and page breaks.
 */
export interface Props {
	node: {
		_type: "break";
		_key: string;
		style?: "line" | "dots" | "space";
	};
}

const { node } = Astro.props;
const style = node?.style || "line";
---

{
	style === "dots" ? (
		<div class="emdash-break emdash-break-dots">• • •</div>
	) : style === "space" ? (
		<div class="emdash-break emdash-break-space" />
	) : (
		<hr class="emdash-break emdash-break-line" />
	)
}

<style>
	.emdash-break {
		margin: 2rem 0;
	}
	.emdash-break-line {
		border: none;
		border-top: 1px solid #e0e0e0;
	}
	.emdash-break-dots {
		text-align: center;
		color: #999;
		letter-spacing: 0.5em;
	}
	.emdash-break-space {
		height: 2rem;
	}
</style>
