community-rule/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.view.tsx

import { memo } from "react";
import Link from "next/link";
import ContentContainer from "../ContentContainer";
import type { ContentThumbnailTemplateViewProps } from "./ContentThumbnailTemplate.types";

function ContentThumbnailTemplateView({
  post,
  className,
  variant,
  sizing,
  backgroundImage,
  backgroundImageSmd,
  href,
  showByline,
  showLeadingImage,
  leadingImageAlt,
  leadingImageSrc,
}: ContentThumbnailTemplateViewProps) {
  if (variant === "responsive") {
    // Single card; <picture> swaps to the vertical image at md (640px),
    // which is where Learn's grid goes from one landscape card to two.
    return (
      <Link href={href} className={`group block w-full ${className}`}>
        <div className="relative aspect-[320/225.5] w-full overflow-hidden md:aspect-[260/390]">
          <div className="absolute inset-0 z-0">
            <picture>
              {backgroundImageSmd ? (
                <source
                  media="(min-width: 640px)"
                  srcSet={backgroundImageSmd}
                />
              ) : null}
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={backgroundImage}
                alt=""
                className="pointer-events-none size-full object-cover"
              />
            </picture>
          </div>
          <div className="absolute left-[4.375%] top-[6.099%] z-20 w-[71.875%] max-h-[68%] overflow-hidden md:left-[6.923%] md:top-[4.615%] md:max-h-[48%] md:w-[76.923%]">
            <ContentContainer
              post={post}
              size="xs"
              showByline={showByline}
              showLeadingImage={showLeadingImage}
              leadingImageAlt={leadingImageAlt}
              leadingImageSrc={leadingImageSrc}
            />
          </div>
        </div>
      </Link>
    );
  }

  if (variant === "vertical") {
    if (sizing === "fixed") {
      return (
        <Link href={href} className={`group block ${className}`}>
          <div className="relative h-[390px] w-[260px] overflow-hidden">
            <div className="absolute inset-0 z-0">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={backgroundImage}
                alt=""
                className="pointer-events-none size-full object-cover"
              />
            </div>
            <div className="absolute left-[18px] top-[18px] z-20 w-[200px]">
              <ContentContainer
                post={post}
                width="200px"
                size="xs"
                showByline={showByline}
                showLeadingImage={showLeadingImage}
                leadingImageAlt={leadingImageAlt}
                leadingImageSrc={leadingImageSrc}
              />
            </div>
          </div>
        </Link>
      );
    }

    return (
      <Link href={href} className={`group block w-full ${className}`}>
        <div className="relative aspect-[260/390] w-full overflow-hidden">
          <div className="absolute inset-0 z-0">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={backgroundImage}
              alt=""
              className="pointer-events-none size-full object-cover"
            />
          </div>
          <div className="absolute left-[6.923%] top-[4.615%] z-20 w-[76.923%] max-h-[48%] overflow-hidden">
            <ContentContainer
              post={post}
              size="xs"
              showByline={showByline}
              showLeadingImage={showLeadingImage}
              leadingImageAlt={leadingImageAlt}
                leadingImageSrc={leadingImageSrc}
            />
          </div>
        </div>
      </Link>
    );
  }

  if (sizing === "fixed") {
    return (
      <Link href={href} className={`group block ${className}`}>
        <div className="relative h-[225.5px] w-[320px] overflow-hidden">
          <div className="absolute inset-0 z-0">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={backgroundImage}
              alt=""
              className="pointer-events-none size-full object-cover"
            />
          </div>
          <div className="absolute left-[14px] top-[13.75px] z-20 w-[230px]">
            <ContentContainer
              post={post}
              width="230px"
              size="xs"
              showByline={showByline}
              showLeadingImage={showLeadingImage}
              leadingImageAlt={leadingImageAlt}
                leadingImageSrc={leadingImageSrc}
            />
          </div>
        </div>
      </Link>
    );
  }

  return (
    <Link href={href} className={`group block w-full ${className}`}>
      <div className="relative aspect-[320/225.5] w-full overflow-hidden">
        <div className="absolute inset-0 z-0">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={backgroundImage}
            alt=""
            className="pointer-events-none size-full object-cover"
          />
        </div>
        <div className="absolute left-[4.375%] top-[6.099%] z-20 w-[71.875%] max-h-[48%] overflow-hidden">
          <ContentContainer
            post={post}
            size="xs"
            showByline={showByline}
            showLeadingImage={showLeadingImage}
            leadingImageAlt={leadingImageAlt}
                leadingImageSrc={leadingImageSrc}
          />
        </div>
      </div>
    </Link>
  );
}

ContentThumbnailTemplateView.displayName = "ContentThumbnailTemplateView";

export default memo(ContentThumbnailTemplateView);