import {
  Mjml,
  MjmlAll,
  MjmlAttributes,
  MjmlBody,
  MjmlColumn,
  MjmlHead,
  MjmlImage,
  MjmlPreview,
  MjmlSection,
  MjmlText,
  MjmlWrapper,
} from "@faire/mjml-react";

import { defaultTheme } from "@/components/emails/themes/default";
import type { EmailThemeTokens } from "@/components/emails/themes/default";

export type ImageGalleryVariant = "default" | "slanted-left" | "slanted-right";

export interface ImageGalleryProps {
  theme?: EmailThemeTokens;
  images?: { src: string; alt: string }[];
  variant?: ImageGalleryVariant;
}

const ImageGallerySection = ({
  images,
  theme,
  variant,
}: {
  images: ImageGalleryProps["images"];
  theme: EmailThemeTokens;
  variant: ImageGalleryVariant;
}) => {
  const rows: { src: string; alt: string }[][] = [];
  const imgs = images ?? [];
  for (let i = 0; i < imgs.length; i += 2) {
    rows.push(imgs.slice(i, i + 2));
  }

  return (
    <MjmlSection
      backgroundColor={theme.colorBackground}
      padding={`${theme.spacingXl ?? "48px"} 0`}
    >
      {rows.map((row, rowIndex) =>
        row.map((img) => (
          <MjmlColumn key={`${img.src}-${rowIndex}`} width="50%" padding="8px">
            <MjmlImage
              alt={img.alt}
              borderRadius={theme.borderRadius}
              src={img.src}
              width={280}
            />
          </MjmlColumn>
        ))
      )}
    </MjmlSection>
  );
};

export const ThreeColumnsImageGrid = ({
  theme = defaultTheme,
  images = [
    { alt: "Gallery 1", src: "https://static.photos/technology/400x300/2" },
    { alt: "Gallery 2", src: "https://static.photos/technology/400x300/3" },
    { alt: "Gallery 3", src: "https://static.photos/technology/400x300/4" },
    { alt: "Gallery 4", src: "https://static.photos/technology/400x300/5" },
  ],
  variant = "default",
}: ImageGalleryProps) => (
  <Mjml>
    <MjmlHead>
      <MjmlPreview>image gallery</MjmlPreview>
      <MjmlAttributes>
        <MjmlAll color={theme.colorTextMuted} fontFamily={theme.fontFamily} />
        <MjmlText
          fontSize={theme.fontSizeBase}
          lineHeight={theme.lineHeightBase}
        />
      </MjmlAttributes>
    </MjmlHead>
    <MjmlBody
      backgroundColor={theme.colorBackground}
      width={theme.containerWidth}
    >
      <MjmlWrapper padding="0">
        <ImageGallerySection images={images} theme={theme} variant={variant} />
      </MjmlWrapper>
    </MjmlBody>
  </Mjml>
);

ThreeColumnsImageGrid.PreviewProps = {
  images: [
    {
      alt: "Product Shot 1",
      src: "https://static.photos/technology/400x300/6",
    },
    {
      alt: "Product Shot 2",
      src: "https://static.photos/technology/400x300/7",
    },
    {
      alt: "Product Shot 3",
      src: "https://static.photos/technology/400x300/8",
    },
    {
      alt: "Product Shot 4",
      src: "https://static.photos/technology/400x300/9",
    },
  ],
  theme: defaultTheme,
  variant: "default",
} satisfies ImageGalleryProps;

Three Columns Image Grid

Installation

Usage

API Reference