/**
 * Figma: Content page Template body ornaments (19003:23305).
 * Hidden below md (640). From md, shapes sit in the side gutters and the
 * page frame clips anything that bleeds past the viewport.
 *
 * - 19003:23575 / 19000:23008 — right
 * - 19003:23576 / 19000:23009 — left
 */
import {
  getAssetPath,
  howItWorksOrnamentLeftPath,
  howItWorksOrnamentRightPath,
  resolveArticleOrnamentPath,
} from "../../../lib/assetUtils";

type ContentTemplateDecorativeShapesVariant = "guide" | "article";

type ContentTemplateDecorativeShapesProps = {
  variant: ContentTemplateDecorativeShapesVariant;
  slug?: string;
};

const RIGHT_GUIDE_CLASS =
  "pointer-events-none absolute z-0 hidden aspect-[155/250] md:block left-[87.19%] right-0 top-[266px] lg:left-[84.86%] lg:top-[255px]";
const LEFT_GUIDE_CLASS =
  "pointer-events-none absolute z-0 hidden aspect-[119/136] md:block left-0 right-[88.38%] top-[811px]";
const RIGHT_ARTICLE_CLASS =
  "pointer-events-none absolute z-0 hidden aspect-square md:block left-[87.19%] right-[-8.13%] top-[266px] lg:left-[84.86%] lg:right-[-9.28%] lg:top-[255px]";
const LEFT_ARTICLE_CLASS =
  "pointer-events-none absolute z-0 hidden aspect-square md:block left-[-1.66%] right-[88.38%] top-[811px]";

export default function ContentTemplateDecorativeShapes({
  variant,
  slug,
}: ContentTemplateDecorativeShapesProps) {
  const isArticle = variant === "article";
  const rightSrc = isArticle
    ? resolveArticleOrnamentPath(slug, "right")
    : getAssetPath(howItWorksOrnamentRightPath());
  const leftSrc = isArticle
    ? resolveArticleOrnamentPath(slug, "left")
    : getAssetPath(howItWorksOrnamentLeftPath());

  return (
    <>
      <div
        aria-hidden
        className={isArticle ? RIGHT_ARTICLE_CLASS : RIGHT_GUIDE_CLASS}
        data-node-id="19003:23575"
      >
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={rightSrc}
          alt=""
          className="pointer-events-none size-full max-w-none object-contain"
        />
      </div>
      <div
        aria-hidden
        className={isArticle ? LEFT_ARTICLE_CLASS : LEFT_GUIDE_CLASS}
        data-node-id="19003:23576"
      >
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={leftSrc}
          alt=""
          className="pointer-events-none size-full max-w-none object-contain"
        />
      </div>
    </>
  );
}
