'use client';

import { useState } from "react";
import { Button } from "@mui/material"

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">
                <p
                    className={`
                        text-[#616161] text-[14px] font-normal text-justify 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>
            </div>
            <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">
                    {doctor.specialties.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>
                            <p className="text-[#616161] text-[16px] font-normal text-nowrap">{item}</p>
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    )
}

export default AboutDcotor