// Generated with util/create-component.js
import React, { useEffect, useState } from "react";
import { Caret } from "../../UI/Icon";
import { TextProps } from "./Text.types";

const Text = ({
  editorContent,
  defaultCollapsed = false,
  className,
  isMobile = true,
}: TextProps) => {
  const [isCollapsed, setIsCollapsed] = useState<boolean>(defaultCollapsed);

  useEffect(() => {
    setIsCollapsed(defaultCollapsed);
  }, [defaultCollapsed]);

  return (
    <>
      <div
        data-testid="ContentsEditorText"
        className={`relative overflow-hidden transition-[max-height] duration-1000 ease-in-out ${
          isCollapsed
            ? isMobile
              ? "max-h-[16rem]"
              : "max-h-[14rem]"
            : "max-h-[1000rem]"
        } `}
      >
        <div
          className={`w-full max-w-[80rem] whitespace-pre-wrap break-words ${className ??
            (isMobile ? "p-[2rem]" : "py-[2rem] px-[4rem]")} ${
            isMobile ? "text-body-4" : "text-body-1"
          }`}
          dangerouslySetInnerHTML={{
            __html: editorContent,
          }}
        />

        <div
          className={`absolute bottom-0 h-[10rem] w-full bg-gradient-to-t from-white ${
            isCollapsed ? "" : "hidden"
          }`}
        />
      </div>

      <button
        className={`flex w-full items-center justify-center ${
          isCollapsed
            ? isMobile
              ? "pt-[1.2rem] pb-[2rem]"
              : "pt-[1.2rem] pb-[4rem]"
            : "hidden"
        }`}
        onClick={() => setIsCollapsed(false)}
      >
        <p className="mr-[0.4rem] text-body-2 font-bold">더보기</p>
        <Caret direction="down" size="2.4rem" />
      </button>
    </>
  );
};

export default Text;