/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

import React from "react";
import { HighlightText } from "./HighlightText";
import { HighlightImage } from "./HighlightImage";
import { resolveText, resolveImage } from "./OMCHighlightRegistry.mjs";

export const HighlightPopoverBody = ({ body, content, onCtaClick }) => {
  const image = resolveImage({ content, defaults: body?.image });
  const title = resolveText({
    content,
    rawKey: "cardTitle",
    l10nKey: "title",
    defaultL10nId: body?.title?.l10nId,
  });
  const subtitle = resolveText({
    content,
    rawKey: "cardMessage",
    l10nKey: "subtitle",
    defaultL10nId: body?.subtitle?.l10nId,
  });
  const cta = resolveText({
    content,
    rawKey: "cardCta",
    l10nKey: "cta",
    defaultL10nId: body?.cta?.l10nId,
  });

  return (
    <div className="highlight-popover-body">
      <HighlightImage source={image} className="highlight-popover-image" />
      <HighlightText as="h3" className="title" value={title} />
      <HighlightText as="p" className="subtitle" value={subtitle} />
      {cta && onCtaClick && (
        <span className="button-wrapper">
          {cta.raw ? (
            <moz-button type="primary" label={cta.raw} onClick={onCtaClick} />
          ) : (
            <moz-button
              type="primary"
              data-l10n-id={cta.l10nId}
              onClick={onCtaClick}
            />
          )}
        </span>
      )}
    </div>
  );
};
