const CoLivingAmenitiesCards = ({ item }: { item: any }) => {
  return (
    <>
      <div className="mb-5">
        <h6 className="!mb-2 !font-fw700 fs-18">{"Private"}</h6>
        {item?.private?.length === 0 ? (
          <p className="fs-16">{`No Amenities available`}</p>
        ) : (
          <ul
            className={`!mt-2 !p-0 rounded-[20px] grid grid-cols-2 xl:grid-cols-3 gap-3 lg:gap-4`}
          >
            {item?.private?.map((feature: any) => {
              return (
                <li
                  key={feature?.amenitiesId}
                  className="flex gap-2 items-center text-grey85 text-size-fs14 lg:text-size-fs16"
                >
                  <i className="icon icon-tick !bg-primaryColor !w-[18px] !h-[18px] lg:!w-5 lg:!h-5"></i>
                  {feature?.title}
                </li>
              );
            })}
          </ul>
        )}
      </div>

      <div className="">
        <h6 className="!mb-2 !font-fw700 fs-18">{"Shared"}</h6>
        {item?.allAmenitiesData?.length === 0 ? (
          <p className="fs-16">{`No Amenities available`}</p>
        ) : (
          <ul className="!mt-2 !p-0 rounded-[20px] grid grid-cols-2 xl:grid-cols-3 gap-3 lg:gap-4">
            {item?.allAmenitiesData?.map((feature: any) => {
              return (
                <li
                  key={feature?.amenitiesId}
                  className="flex gap-2 items-center text-grey85 text-size-fs14 lg:text-size-fs16"
                >
                  <i className="icon icon-tick !bg-primaryColor !w-[18px] !h-[18px] lg:!w-5 lg:!h-5"></i>
                  {feature?.title}
                </li>
              );
            })}
          </ul>
        )}
      </div>
    </>
  );
};

export default CoLivingAmenitiesCards;