ldc-ovoteam/resources/ts/front/Components/Theme/ItemCard.tsx

import Button from "$/uwil/Button";
import {
  bgColors,
  fonts,
  imageShapes,
  simpleWeights,
} from "@/front/lib/constants";
import Image from "$/uwil/Image";
import { sanitizeRichHtml } from "@/lib/sanitize-html";
import SafeHtml from "@/components/safe-html";
import { cn } from "@/lib/utils";
import { ThemeItemCardProps } from "@/types/front";

export default function ItemCard({
  button,
  title,
  image,
  description,
  variant,
  size,
  subtitle,
  shape = imageShapes.ROUNDED,
}: Readonly<ThemeItemCardProps>) {
  const width =
    size && size.width
      ? size.width
      : "w-full max-w-[280px] sm:max-w-72 lg:max-w-64 xl:max-w-72";

  const height = size && size.height ? size.height : "aspect-square";

  const titleFont = title?.font ?? fonts.DELIUS_SWASH;
  const titleWeight = title?.weight ?? simpleWeights.NORMAL;

  const descriptionFont = description?.font ?? fonts.GOTHAM;
  const descriptionWeight = description?.weight ?? simpleWeights.NORMAL;

  const btnVariant = variant === bgColors.PRIMARY ? "inverted" : "default";

  return (
    <div
      className={`flex flex-col items-center justify-start ${width} inline-block h-full`}
    >
      <Image
        size={`${width} ${height}`}
        image={image}
        shape={shape}
        action={
          button
            ? {
                href: button.href,
                label: button.label,
              }
            : undefined
        }
      />

      <div className="w-full mt-6 text-center px-10 md:px-0 flex flex-col flex-1 items-center">
        {title?.text && (
          <h4
            className={cn(
              "text-3xl md:text-3xl break-words [overflow-wrap:anywhere] max-w-full",
              titleFont,
              titleWeight,
            )}
          >
            {title.text}
          </h4>
        )}
        {subtitle?.text && (
          <h5
            className={cn(
              "text-2xl break-words [overflow-wrap:anywhere] max-w-full",
              subtitle?.font ?? fonts.DELIUS_SWASH,
              subtitle?.weight ?? "font-normal",
            )}
          >
            {subtitle.text}
          </h5>
        )}
        {description?.text && (
          <SafeHtml
            as="p"
            className={cn(descriptionFont, descriptionWeight, "pt-4")}
            html={sanitizeRichHtml(description.text)}
          />
        )}
        {button?.href && button?.label && (
          <div className="mt-auto pt-5 w-full flex justify-center">
            <Button
              variant={btnVariant}
              icon={{
                icon: "chevron-right",
                placement: "right",
              }}
              link={{
                href: button.href,
                label: button.label,
              }}
            />
          </div>
        )}
      </div>
    </div>
  );
}