---
/**
 * Portable Text Pullquote block component
 *
 * Renders a styled pullquote from WordPress imports.
 * Pullquotes are designed to stand out more than regular blockquotes.
 */
export interface Props {
	node: {
		_type: "pullquote";
		_key: string;
		text: string;
		citation?: string;
	};
}

const { node } = Astro.props;
const { text, citation } = node ?? {};
---

<figure class="emdash-pullquote">
	<blockquote class="emdash-pullquote__text">
		{text}
	</blockquote>
	{citation && <figcaption class="emdash-pullquote__citation">&mdash; {citation}</figcaption>}
</figure>

<style>
	.emdash-pullquote {
		margin: 2rem 0;
		padding: 1.5rem 2rem;
		border-top: 4px solid var(--emdash-pullquote-border, #0073aa);
		border-bottom: 4px solid var(--emdash-pullquote-border, #0073aa);
		text-align: center;
	}

	.emdash-pullquote__text {
		font-size: 1.5rem;
		font-style: italic;
		line-height: 1.4;
		color: var(--emdash-pullquote-color, #333);
		margin: 0;
	}

	.emdash-pullquote__citation {
		margin-top: 1rem;
		font-size: 0.9rem;
		font-style: normal;
		color: var(--emdash-pullquote-citation-color, #666);
	}
</style>
