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

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

  const imageUrl = entry.data.image
    ? useMediaAsset(entry.data.image, collection, imageField, entry)
    : entry.data.email
    ? undefined
    : useMediaAsset("/media/people/gcg.webp", collection, imageField, entry);

  return [
    PageHeader(entry),
    h(
      "section",
      { className: "section bg-light" },
      h(
        "div",
        { className: "container" },
        h(
          "div",
          { className: "row" },
          h(
            "div",
            { className: "col-lg-10 mx-auto" },
            h(
              "div",
              { className: "text-center" },
              h(
                "figure",
                {},
                h("img", {
                  className: "rounded-circle img-fluid mb-4",
                  src:
                    imageUrl ??
                    "https://www.gravatar.com/avatar/" +
                      md5(entry.data.email) +
                      "?s=128&pg&d=identicon",
                  width: "128px",
                }),
                h(
                  "figcaption",
                  {},
                  h("h4", { className: "fw-bold" }, entry.data.title)
                )
              ),
              h("hr"),
              widgetFor("body"),
              h("hr"),
              h(
                "ul",
                { className: "list-inline" },
                entry.data.email
                  ? h(
                      "li",
                      { className: "list-inline-item" },
                      h("i", { className: "mdi mdi-at" })
                    )
                  : null
              )
            )
          )
        )
      )
    ),
  ];
};

export default AuthorPreview;