// Generated with util/create-component.js
import React, { memo } from "react";
import Heading from "../../UI/Heading";
import {
  DoubleQuotationMarksForEnding,
  DoubleQuotationMarksForStarting,
} from "../../UI/Icon";
import Text from "../../UI/Text";
import {
  IReviewEvaluationListProps,
  TSentimentType,
} from "./ReviewEvaluationList.types";

const IconComponent = ({
  sentimentType,
}: {
  sentimentType: TSentimentType;
}) => {
  if (sentimentType === "positive") {
    return (
      <Heading level={5} className="mr-[0.8rem]">
        😊
      </Heading>
    );
  } else if (sentimentType === "negative") {
    return (
      <Heading level={5} className="mr-[0.8rem]">
        🤔
      </Heading>
    );
  } else {
    return null;
  }
};

const ReviewEvaluationList = ({
  mainTitle,
  articleList,
}: IReviewEvaluationListProps) => {
  return (
    <section
      data-testid="ContentsEditorReviewEvaluationList"
      className="w-full max-w-[80rem] px-[2rem] pt-[3rem] pb-[5rem] pc:pb-[4rem]"
    >
      <div className="mx-auto flex w-full place-items-center pb-[1rem] pc:gap-x-[2rem] mobile:justify-center mobile:gap-x-[1rem]">
        <DoubleQuotationMarksForStarting size="1.2rem" />

        <h5 className="whitespace-pre-wrap text-heading-5 font-extrabold">
          {mainTitle}
        </h5>

        <DoubleQuotationMarksForEnding size="1.2rem" />
      </div>

      {articleList.map(
        ({
          sentimentType,
          articleTitle,
          articleColor,
          textCount,
          textList,
        }) => {
          return (
            <div
              key={`ReviewEvaluationList_${sentimentType}_${articleTitle}`}
              className="py-[1rem]"
            >
              <div className="flex">
                <IconComponent sentimentType={sentimentType} />
                <h5
                  className="whitespace-pre-wrap text-heading-5 font-extrabold"
                  style={{ color: articleColor }}
                >
                  {articleTitle}
                </h5>
              </div>

              <div className="mt-[1.2rem] space-y-[1.2rem]">
                {textList.map((text, index) => {
                  if (index + 1 > textCount || text === "") {
                    return null;
                  }
                  return (
                    <div key={`ReviewEvaluation__${text}`} className="flex">
                      <div className="mr-[1rem] mt-[0.9rem] h-[0.5rem] w-[0.5rem] flex-shrink-0 rounded-full bg-black" />

                      <Text type="B4" className="whitespace-pre-wrap">
                        {text}
                      </Text>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        }
      )}
    </section>
  );
};

export default memo(ReviewEvaluationList);