---
/**
 * Portable Text Cover block component
 *
 * Renders an image/video with text overlay from WordPress imports.
 */
import { PortableText } from "astro-portabletext";

export interface Props {
	node: {
		_type: "cover";
		_key: string;
		backgroundImage?: string;
		backgroundVideo?: string;
		overlayColor?: string;
		overlayOpacity?: number;
		content: unknown[];
		minHeight?: string;
		alignment?: "left" | "center" | "right";
	};
}

const { node } = Astro.props;
const {
	backgroundImage,
	backgroundVideo,
	overlayColor,
	overlayOpacity = 0.5,
	content = [],
	minHeight = "300px",
	alignment = "center",
} = node ?? {};

const hasBackground = backgroundImage || backgroundVideo;
const overlayStyle = overlayColor
	? `background-color: ${overlayColor}; opacity: ${overlayOpacity};`
	: `background-color: rgba(0, 0, 0, ${overlayOpacity});`;
---

<div
	class:list={["emdash-cover", `emdash-cover--align-${alignment}`]}
	style={`min-height: ${minHeight};`}
>
	{
		backgroundImage && !backgroundVideo && (
			<img src={backgroundImage} alt="" class="emdash-cover__background" loading="lazy" />
		)
	}
	{
		backgroundVideo && (
			<video
				class="emdash-cover__background emdash-cover__video"
				autoplay
				muted
				loop
				playsinline
			>
				<source src={backgroundVideo} />
			</video>
		)
	}
	{hasBackground && <div class="emdash-cover__overlay" style={overlayStyle} />}
	<div class="emdash-cover__content">
		<PortableText value={content} />
	</div>
</div>

<style>
	.emdash-cover {
		position: relative;
		display: flex;
		align-items: center;
		padding: 2rem;
		margin: 1.5rem 0;
		overflow: hidden;
		border-radius: 4px;
		background-color: var(--emdash-cover-fallback-bg, #333);
	}

	.emdash-cover__background {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: 0;
	}

	.emdash-cover__video {
		object-fit: cover;
	}

	.emdash-cover__overlay {
		position: absolute;
		inset: 0;
		z-index: 1;
	}

	.emdash-cover__content {
		position: relative;
		z-index: 2;
		width: 100%;
		color: var(--emdash-cover-text-color, #fff);
	}

	.emdash-cover--align-left {
		justify-content: flex-start;
		text-align: left;
	}

	.emdash-cover--align-center {
		justify-content: center;
		text-align: center;
	}

	.emdash-cover--align-right {
		justify-content: flex-end;
		text-align: right;
	}

	.emdash-cover__content :global(h1),
	.emdash-cover__content :global(h2),
	.emdash-cover__content :global(h3),
	.emdash-cover__content :global(h4),
	.emdash-cover__content :global(p) {
		color: inherit;
	}
</style>
