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

function Locations({ addresses, bookableAddressUuids = [] }) {
  if (!addresses?.length) return null;

  const bookable = new Set(bookableAddressUuids);
  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">
        {addresses.map((item, idx) => (
          <CustomLoading key={idx} width="full" height={40}>
            <li className="w-full">
              <Item data={item} bookable={bookable.has(item.uuid)} />
              {addresses.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;