---
import { sanitizeHref } from "../utils/url.js";

/**
 * Portable Text Button block component
 *
 * Renders a single button from WordPress imports.
 */
export interface Props {
	node: {
		_type: "button";
		_key: string;
		text: string;
		url?: string;
		style?: "default" | "outline" | "fill";
	};
}

const { node } = Astro.props;
const { text, url: rawUrl, style = "default" } = node ?? {};
const url = rawUrl ? sanitizeHref(rawUrl) : undefined;
---

{
	url ? (
		<a href={url} class:list={["emdash-button", `emdash-button--${style}`]}>
			{text}
		</a>
	) : (
		<span class:list={["emdash-button", `emdash-button--${style}`]}>{text}</span>
	)
}

<style>
	.emdash-button {
		display: inline-block;
		padding: 0.75em 1.5em;
		border-radius: 4px;
		text-decoration: none;
		font-weight: 500;
		cursor: pointer;
		transition:
			background-color 0.2s,
			border-color 0.2s,
			color 0.2s;
	}

	.emdash-button--default,
	.emdash-button--fill {
		background-color: var(--emdash-button-bg, #0073aa);
		color: var(--emdash-button-color, #fff);
		border: 2px solid var(--emdash-button-bg, #0073aa);
	}

	.emdash-button--default:hover,
	.emdash-button--fill:hover {
		background-color: var(--emdash-button-bg-hover, #005177);
		border-color: var(--emdash-button-bg-hover, #005177);
	}

	.emdash-button--outline {
		background-color: transparent;
		color: var(--emdash-button-bg, #0073aa);
		border: 2px solid var(--emdash-button-bg, #0073aa);
	}

	.emdash-button--outline:hover {
		background-color: var(--emdash-button-bg, #0073aa);
		color: var(--emdash-button-color, #fff);
	}
</style>
