import type { FlatTemplatable } from "tempstream";
import { TempstreamJSX } from "tempstream";
import type {
	ExtractStructuredComponentArgumentsParsed,
	JDDContext,
} from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd";

const component_arguments = {
	title: new ComponentArguments.ShortText(),
	content: new ComponentArguments.Markdown(),
	image_with_alt: new ComponentArguments.Structured({
		image: new ComponentArguments.Image(),
		alt: new ComponentArguments.ShortText(),
	}),
	button: new ComponentArguments.Structured({
		text: new ComponentArguments.ShortText().setExampleValues([""]),
		link: new ComponentArguments.ShortText().setExampleValues([""]),
	}),
} as const;

export class HeaderWithImage extends Component<typeof component_arguments> {
	getArguments() {
		return component_arguments;
	}

	toHTML(
		{
			title,
			content,
			image_with_alt,
			button,
		}: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>,
		{ render_markdown, render_image }: JDDContext
	): FlatTemplatable {
		const buttonText = button.text.toUpperCase();
		const titleUpperCase = title.toUpperCase();

		return (
			<div class="header-with-image">
				<div class="container">
					<div class="img-container">
						{render_image(image_with_alt.image, {
							container: { width: 600, height: 450, objectFit: "contain" },
							alt: image_with_alt.alt,
							// crop: { width: 600, height: 450 },
						})}
					</div>
					<div class="title-wrapper">
						<h2 class="title">{titleUpperCase}</h2>
					</div>
					<div class="content">{render_markdown(content)}</div>
					{button.text === "" ? null : (
						<div class="button-container">
							<a class="button" href={button.link}>
								{buttonText}
							</a>
						</div>
					)}
				</div>
			</div>
		);
	}
}