import { useState } from "react";

import ListBime from "./ListBime";
import Services from "./Services";
import Images from "./images/Images";
import { Button } from "@mui/material";
import Specialties from "./Specialties";
import ContentDetail from "./ContentDetail";
import MultilineLoading from "@/app/component/loading/Multiline";

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

  return (
    <div className="opacity-page transition-all duration-500">
      <Images data={data} />
      <ContentDetail head={data.title}>
        <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:absolute after:right-0 after:bottom-0 after:h-[80px]
                        after:shadow-xl after:w-full transition-all duration-500
                        ${
                          isMore
                            ? "after:bg-transparent max-h-screen"
                            : "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]"
                        }
                    `}
              dangerouslySetInnerHTML={{ __html: data?.caption }}
            ></p>
          </MultilineLoading>
          <Button
            className="!text-[#F17732] !text-[14px] !font-light !p-2"
            onClick={() => setIsMore(!isMore)}
            variant="text"
          >
            {isMore ? "مطالعه کمتر" : "مطالعه بیشتر"}
          </Button>
        </div>
      </ContentDetail>
      <ContentDetail head="بیمه های طرف قرارداد">
        <ListBime data={data} />
      </ContentDetail>
      <ContentDetail head="تخصص ها">
        <Specialties data={data} />
      </ContentDetail>
      <ContentDetail head="خدمات">
        <Services data={data} />
      </ContentDetail>
    </div>
  );
}

export default About;
