// Generated with util/create-component.js
import React, { memo } from "react";
import Heading from "../../UI/Heading";
import TextElement from "../Text";
import { IAnnouncementListProps, TIconType } from "./AnnouncementList.types";

const IconComponent = ({ iconType }: { iconType: TIconType }) => {
  if (iconType === "xMark") {
    return (
      <Heading level={5} className="mr-[0.8rem]">
        ❌
      </Heading>
    );
  } else if (iconType === "magnifyingGlass") {
    return (
      <Heading level={5} className="mr-[0.8rem]">
        🔍
      </Heading>
    );
  } else {
    return null;
  }
};

const AnnouncementList = ({ contentList }: IAnnouncementListProps) => {
  return (
    <div
      data-testid="ContentsEditorAnnouncementList"
      className="w-full divide-y-[1px] divide-dashed divide-gray-3 bg-gray-1 px-[2rem] pc:max-w-[80rem]"
    >
      {contentList.map(({ iconType, title, content }) => {
        return (
          <div
            key={`AnnouncementList_${iconType}_${title}`}
            className="py-[2rem]"
          >
            <div className="flex">
              <IconComponent iconType={iconType} />
              <Heading level={5} className="whitespace-pre-wrap">
                {title}
              </Heading>
            </div>

            <TextElement
              editorContent={content}
              className="!whitespace-normal pt-[1rem]"
            />
          </div>
        );
      })}
    </div>
  );
};

export default memo(AnnouncementList);