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

import Image from "$/uwil/Image";
import SafeHtml from "@/components/safe-html";
import { Separator } from "@/components/ui/separator";
import {
  BgColorName,
  bgColors,
  fonts,
  ImageShapeName,
  imageShapes,
} from "@/front/lib/constants";
import { sanitizeRichHtml } from "@/lib/sanitize-html";
import { cn } from "@/lib/utils";
import { ImageProps, TextProps } from "@/types/front";

export type TripleColType = {
  image: ImageProps;
  title?: TextProps;
  subtitle?: TextProps;
  description: TextProps;
};

type Props = {
  cols: TripleColType[];
  variant?: BgColorName;
  shape?: ImageShapeName;
};

export default function TripleCol(props: Readonly<Props>) {
  const { cols, variant, shape = imageShapes.ROUNDED } = props;

  const width = "w-72 lg:w-56";
  const height = "aspect-square lg:h-56";

  const separatorVariant =
    variant === bgColors.BACKGROUND ? bgColors.PRIMARY : bgColors.BACKGROUND;
  return (
    <div className="grid md:grid-cols-3 grid-cols-1 md:gap-8">
      {cols.map((col, index) => {
        const isLast = index === cols.length - 1;
        return (
          <div
            className="text-center flex flex-col items-center gap-3 md:gap-5"
            key={`${index + 1}-${col.title?.text ?? ""}`}
          >
            <Image
              size={col.image.size ?? `${width} ${height}`}
              image={col.image}
              shape={shape}
            />
            {col?.title?.text || col?.subtitle?.text ? (
              <div>
                {col.title && (
                  <h4
                    className={cn(
                      "text-2xl uppercase",
                      col.title.font,
                      col.title.weight ?? "font-bold ",
                    )}
                  >
                    {col.title.text}
                  </h4>
                )}
                {col.subtitle && (
                  <h5
                    className={cn(
                      "text-2xl",
                      col.subtitle.font ?? fonts.DELIUS_SWASH,
                      col.subtitle.weight ?? "font-normal",
                    )}
                  >
                    {col.subtitle.text}
                  </h5>
                )}
              </div>
            ) : null}
            <SafeHtml
              as="p"
              className={cn(
                col?.title?.font,
                col?.title?.weight ?? "font-normal ",
              )}
              html={sanitizeRichHtml(col.description.text)}
            />
            {!isLast && (
              <Separator
                className={cn("md:hidden w-[70%] h-3 my-12", separatorVariant)}
              />
            )}
          </div>
        );
      })}
    </div>
  );
}