---
/**
 * Test page for embed components
 *
 * This page renders hardcoded Portable Text with embed blocks.
 */
import { PortableText } from "emdash/ui";
import { embedComponents } from "@emdash-cms/plugin-embeds/astro";

// Sample Portable Text content with various embed types
const testContent = [
	{
		_type: "block",
		_key: "intro",
		style: "normal",
		children: [
			{
				_type: "span",
				text: "This page tests the auto-registered embed components. If you see the embeds below, the virtual module system is working!",
			},
		],
	},
	{
		_type: "block",
		_key: "h1",
		style: "h2",
		children: [{ _type: "span", text: "YouTube Embed" }],
	},
	{
		_type: "youtube",
		_key: "yt1",
		id: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
	},
	{
		_type: "block",
		_key: "h2",
		style: "h2",
		children: [{ _type: "span", text: "Vimeo Embed" }],
	},
	{
		_type: "vimeo",
		_key: "vim1",
		id: "https://vimeo.com/76979871",
	},
	{
		_type: "block",
		_key: "h3",
		style: "h2",
		children: [{ _type: "span", text: "Link Preview" }],
	},
	{
		_type: "linkPreview",
		_key: "lp1",
		id: "https://astro.build",
	},
	{
		_type: "block",
		_key: "outro",
		style: "normal",
		children: [
			{
				_type: "span",
				text: "If you see the embeds above rendered correctly, the plugin system is working! No manual component wiring was needed.",
			},
		],
	},
];
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>Test Embeds - EmDash Plugins Demo</title>
		<style>
			* {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}
			body {
				font-family:
					system-ui,
					-apple-system,
					sans-serif;
				line-height: 1.6;
				color: #1a1a1a;
				max-width: 800px;
				margin: 0 auto;
				padding: 2rem;
			}
			h1 {
				font-size: 2rem;
				margin-bottom: 1rem;
			}
			h2 {
				font-size: 1.5rem;
				margin-top: 2rem;
				margin-bottom: 1rem;
				color: #333;
			}
			p {
				margin-bottom: 1rem;
			}
			.content {
				margin-top: 2rem;
			}
			a {
				color: #2563eb;
			}
			.back {
				display: inline-block;
				margin-bottom: 1rem;
			}
		</style>
	</head>
	<body>
		<a href="/" class="back">&larr; Back to home</a>
		<h1>Embed Components Test</h1>
		<p>This page tests embed components from the embeds plugin.</p>

		<div class="content">
			<PortableText
				value={testContent}
				components={{ type: embedComponents }}
			/>
		</div>
	</body>
</html>
