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

const component_arguments = {
	title: new ComponentArguments.ShortText(),
	small_title: new ComponentArguments.ShortText(),
	description: new ComponentArguments.Markdown(),
	img_side: new ComponentArguments.Enum(["right", "left"]),
	image_path: new ComponentArguments.Structured({
		image_path: new ComponentArguments.Image(),
		alt: new ComponentArguments.ShortText(),
	}),
} as const;

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

	toHTML({
		args: { title, small_title, description, image_path, img_side },
		jdd_context: { render_markdown, render_image, language },
	}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
		return (
			<section class="tib">
				<div class={`tib__body tib__body--image-on-${img_side}`}>
					<article class="tib__body-left">
						<h2>{title}</h2>
						<h3>{small_title}</h3>
						<p>{render_markdown(language, description)}</p>
					</article>
					<div class="tib__body-right">
						{render_image(image_path.image_path, {
							container: {
								width: 640,
								height: 360,
								objectFit: "cover",
							},
							crop: {
								width: 640,
								height: 360,
							},
							alt: image_path.alt,
						})}
					</div>
				</div>
			</section>
		);
	}
}