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;