---
/**
 * Portable Text Buttons container component
 *
 * Renders a group of buttons from WordPress imports.
 */
import Button from "./Button.astro";

export interface Props {
	node: {
		_type: "buttons";
		_key: string;
		buttons: Array<{
			_type: "button";
			_key: string;
			text: string;
			url?: string;
			style?: "default" | "outline" | "fill";
		}>;
		layout?: "horizontal" | "vertical";
	};
}

const { node } = Astro.props;
const { buttons = [], layout = "horizontal" } = node ?? {};
---

<div class:list={["emdash-buttons", `emdash-buttons--${layout}`]}>
	{buttons.map((button) => <Button node={button} />)}
</div>

<style>
	.emdash-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
		margin: 1.5rem 0;
	}

	.emdash-buttons--vertical {
		flex-direction: column;
		align-items: flex-start;
	}

	.emdash-buttons--horizontal {
		flex-direction: row;
		align-items: center;
	}
</style>
