import React from "react";

import { SectionHeading, type SectionHeadingProps } from "../SectionHeading";

import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";

import styles from "./PromoListingThumbnailSignpost.module.css";

import {
  ThumbnailSignpost,
  type ThumbnailSignpostProps,
} from "../ThumbnailSignpost";

/**
 * Use `PromoListingThumbnailSignpost` to give supporting information about a page or proposition in the form of the ThumbnailSignposts components.
 */
export const PromoListingThumbnailSignpost: React.FC<
  PromoListingThumbnailSignpostProps
> = ({
  isPadded = true,
  heading,
  content,
  headingLevel,
  thumbnailList,
  isHeadingWordWrap,
  ...props
}) => {
  return (
    <div
      className={styles.PromoListingThumbnailSignpost}
      {...filterAttrs(props)}
    >
      <SectionHeading
        isPadded={isPadded}
        data-testid="PromoListingThumbnailSignpost-header"
        heading={heading}
        headingLevel={headingLevel}
        content={content}
        isHeadingWordWrap={isHeadingWordWrap}
      />
      <ul className={styles.list}>
        {thumbnailList.map((thumbnail, index) => (
          <li key={index}>
            <ThumbnailSignpost {...thumbnail} />
          </li>
        ))}
      </ul>
    </div>
  );
};

export interface PromoListingThumbnailSignpostProps
  extends SectionHeadingProps {
  thumbnailList: ThumbnailSignpostProps[];
}