import React from "react";
import Heading from "../../UI/Heading";
import emphasizeContentStylePresetMap, {
  EmphasizeStylePreset,
} from "./EmphasizeContent.const";
import {
  EmphasizeContentProps,
  EmphasizeContentStyleOptions,
} from "./EmphasizeContent.types";

const EmphasizeContent: React.FC<EmphasizeContentProps> = ({
  stylePreset = EmphasizeStylePreset.EXTRA_BOLD_POINT,
  content,
  ...restProps
}) => {
  const selectedStylePreset: EmphasizeContentStyleOptions =
    emphasizeContentStylePresetMap[stylePreset];
  const {
    style = selectedStylePreset.style,
    BeforeContent = selectedStylePreset.BeforeContent,
    AfterContent = selectedStylePreset.AfterContent,
    contentWrapperClassName = selectedStylePreset.contentWrapperClassName,
    textCenter = selectedStylePreset.textCenter,
    textColor = selectedStylePreset.textColor,
    symbolColor = selectedStylePreset.symbolColor,
    backgroundColor = selectedStylePreset.backgroundColor,
  } = restProps;

  return (
    <div
      data-testid="ContentsEditorEmphasizeContent"
      className="nrc--ContentsEditorEmphasizeContent w-full pt-[3rem] pb-[0.8rem] pc:pb-[1.8rem] mobile:px-[2rem]"
      style={style}
    >
      <div
        className={contentWrapperClassName}
        style={{
          backgroundColor: backgroundColor,
        }}
      >
        {BeforeContent && <BeforeContent symbolColor={symbolColor} />}
        <Heading
          level={5}
          className={`whitespace-pre-wrap ${textCenter && "text-center"}`}
        >
          <span
            style={{
              color: textColor || "#1a1a1a", // editor에서 빈스트링이 오는 경우가 있어, || 를 사용했습니다. 22.8.4
            }}
          >
            {content}
          </span>
        </Heading>
        {AfterContent && <AfterContent symbolColor={symbolColor} />}
      </div>
    </div>
  );
};

export default EmphasizeContent;