import {
	DateFormat,
	PageHeader,
	Section,
	Container,
	Col12,
	Row,
} from "./components/index.js";

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

	const imageUrl = useMediaAsset(
		entry.data.image,
		collection,
		imageField,
		entry
	);
	return [
		PageHeader(entry),
		Section(
			Container(
				Row([
					h(
						"div",
						{ key: "cover-image", className: "col-12 mb-4" },
						h("img", { className: "img-fluid w-100", src: imageUrl })
					),
					Col12(
						h(
							"div",
							{ className: "row mb-3" },
							h(
								"div",
								{ className: "col-6 mb-md-0 text-light" },
								h("span", { className: "fw-bold me-1" }, "Geschrieben von:"),
								entry.data.author
							),
							h(
								"div",
								{ className: "col-6 mb-3 mb-md-0 text-light" },
								h("span", { className: "fw-bold me-1" }, "Datum:"),
								entry.data.date
									? DateFormat({
											date: entry.data.date,
											format: {
												day: "numeric",
												month: "short",
												year: "numeric",
											},
									  })
									: ""
							)
						)
					),
					Row(
						h(
							"div",
							{ className: "col-12 mb-md-0 text-light" },
							h("span", { className: "fw-bold me-1" }, "Kategorie:"),
							entry.data.categories
								? entry.data.categories.map(
										(category, index) => (index != 0 ? ", " : "") + category
								  )
								: ""
						)
					),
					h(
						"div",
						{ key: "border-bottom", className: "col-12 my-4" },
						h("div", { className: "border-bottom" })
					),
					h(
						"div",
						{
							key: "body-content",
							className: "col-12 mb-5 content content-justify",
						},
						widgetFor("body")
					),
				])
			)
		),
	];
};

export default BlogPreview;