"use client";

import { useState } from "react";
import { Button } from "@mui/material";
import MultilineLoading from "@/app/component/loading/Multiline";
import TextLoading from "@/app/component/loading/Text";

function AboutDcotor({ doctor }) {
  const [isMore, setIsMore] = useState(false);

  return (
    <div>
      <a
        id="about-doctor"
        className="absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]"
      ></a>
      <div className="flex flex-col items-center justify-center">
        <MultilineLoading width="full" height={18} line={30}>
          <p
            className={`
                        text-[#616161] text-[14px] font-normal overflow-hidden relative
                        md:max-h-fit after:absolute after:right-0 after:bottom-0 leading-[28px] sm:leading-[30px] md:leading-[32px] lg:leading-[33px] after:h-[80px]
                        after:shadow-xl after:w-full transition-all duration-500 md:after:!bg-[linear-gradient(transparent,transparent)]
                        ${
                          isMore
                            ? "after:bg-transparent max-h-screen"
                            : "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]"
                        }
                    `}
          >
            {doctor?.detail}
          </p>
          <Button
            className="!text-[#F17732] md:!hidden !text-[14px] !font-light !p-2"
            onClick={() => setIsMore(!isMore)}
            variant="text"
          >
            {isMore ? "مطالعه کمتر" : "مطالعه بیشتر"}
          </Button>
        </MultilineLoading>
      </div>
      {doctor?.expertise?.length > 0 && (
        <div className="mt-[12px] lg:mt-[8px] mb-6 md:mb-7 lg:mb-8">
          <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
            خدمات
          </p>
          <ul className="flex flex-col mt-[12px] sm:flex-row gap-y-[16px] items-start sm:items-center justify-start gap-4 flex-wrap">
            {doctor.expertise.map((item, idx) => (
              <li key={idx} className="flex items-center justify-start gap-1">
                <span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
                <TextLoading width={70} height={18}>
                  <h4 className="text-[#616161] text-[16px] font-normal text-nowrap">
                    {item.name}
                  </h4>
                </TextLoading>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}

export default AboutDcotor;