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:"),
                widgetFor("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;