import { PageHeader } from "./components/index.js";

const AboutPreview = ({ widgetFor, widgetsFor, entry, fields, collection }) => {
	const imageField = useMemo(
		() => fields.find((field) => field.name === "image"),
		[fields]
	);

	const imageUrl = useMediaAsset(
		entry.data.image,
		collection,
		imageField,
		entry
	);
	return [
		PageHeader(entry),
		h(
			"section",
			{ className: "section-sm" },
			h(
				"div",
				{ className: "container" },
				h(
					"div",
					{ className: "row" },
					h(
						"div",
						{ className: "col-12" },
						h("img", { className: "img-fluid w-100 mb-4", src: imageUrl }),
						widgetFor("body")
					)
				)
			)
		),
		entry.data.stats.enable
			? h(
					"section",
					{ className: "section-sm bg-primary" },
					h(
						"div",
						{ className: "container" },
						h(
							"div",
							{ className: "row" },
							widgetsFor("stats").data.zahlen.map((element) => {
								return h(
									"div",
									{ className: "col-md-4 col-sm-6 mb-4 mb-md-0" },
									h(
										"div",
										{ className: "text-center" },
										h("h2", { className: "count text-white" }, element.count),
										h("h5", { className: "text-white" }, element.name)
									)
								);
							})
						)
					)
			  )
			: null,
	];
};

export default AboutPreview;