import CustomLoading from "@/app/component/loading/Custom"
import Item from "./Item"

function Locations({ doctor, loading }) {
    return (
        <div>
            <p
                className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold"
            >موقعیت مکانی </p>
            <ul className="flex w-full mt-[24px] flex-col justify-center items-start">
                {doctor.locations.map((item, idx) => (
                    <CustomLoading loading={loading} width='full' height={40}>
                        <li className="w-full">
                            <Item
                                key={idx}
                                data={item}
                            />
                            {doctor.locations.length > idx + 1 && (
                                <span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
                            )}
                        </li>
                    </CustomLoading>
                ))}
            </ul>
        </div>
    )
}

export default Locations