import { useState } from "react";
import { Button } from "@mui/material";
import MultilineLoading from "@/app/component/loading/Multiline";
import { sanitizeHtml } from "@/lib/sanitize";

function TextDetail({ data }) {
  const [isMore, setIsMore] = useState(false);

  return (
    <div className="flex flex-col items-center justify-center">
      <MultilineLoading line={10} width="full" height={18}>
        <p
          className={` text-[#525252] text-[16px] font-normal leading-[32px] overflow-hidden relative after:right-0 after:bottom-0 after:h-[80px] after:shadow-xl after:w-full transition-all duration-500 w-full ${ data?.caption?.length > 180 && isMore ? "after:bg-transparent max-h-screen after:absolute" : data?.caption?.length > 180 && "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px] after:absolute" } `}
          dangerouslySetInnerHTML={{ __html: sanitizeHtml(data?.caption) }}
        ></p>
      </MultilineLoading>
      {data?.caption?.length > 180 && (
        <Button
          className="!text-[#F17732] !text-[14px] !font-light !p-2"
          onClick={() => setIsMore(!isMore)}
          variant="text"
        >
          {isMore ? "مطالعه کمتر" : "مطالعه بیشتر"}
        </Button>
      )}
    </div>
  );
}

export default TextDetail;
