Untitled

 {availableRoom
              ? availableRoom?.map((room: any, index: number) => (
                  <div key={room.id}>
                    {room.booked ? (
                      <CustomImage
                        src={bookedRoomsImage[index]}
                        alt='book room'
                        className='cursor-not-allowed h-28 w-24 sm:h-36 md:h-44 md:w-32'
                      />
                    ) : room.selected && room.hold ? (
                      <Tooltip placement='top' color='invert' className='bg-white' content={room.name}>
                        <CustomImage
                          src={selectedRoomsImage[index]}
                          alt='room'
                          className='h-28 w-24 sm:h-36 md:h-44 md:w-32 my-2'
                          onClick={() => handleImageClick(room.id, index)}
                        />
                      </Tooltip>
                    ) : room.hold ? (
                      <CustomImage
                        src={bookedRoomsImage[index]}
                        alt='book room'
                        className='cursor-not-allowed h-28 w-24 sm:h-36 md:h-44 md:w-32'
                      />
                    ) : room.selected ? (
                      <Tooltip placement='top' color='invert' className='bg-white' content={room.name}>
                        <CustomImage
                          src={selectedRoomsImage[index]}
                          alt='room'
                          className='h-28 w-24 sm:h-36 md:h-44 md:w-32 my-2'
                          onClick={() => handleImageClick(room.id, index)}
                        />
                      </Tooltip>
                    ) : (
                      <Tooltip placement='top' color='invert' className='bg-white' content={room.name}>
                        <CustomImage
                          src={roomsImage[index]}
                          alt='room'
                          className='h-28 w-24 sm:h-36 md:h-44 md:w-32 my-2'
                          onClick={() => handleImageClick(room.id, index)}
                        />
                      </Tooltip>
                    )}
                  </div>
                ))
              : data?.map((room: any, index: number) => (
                  <div key={room.id}>
                    {room.booked ? (
                      <CustomImage
                        src={bookedRoomsImage[index]}
                        alt='book room'
                        className='cursor-not-allowed h-28 w-24 sm:h-36 md:h-44 md:w-32'
                      />
                    ) : room.selected && room.hold ? (
                      <Tooltip placement='top' color='invert' className='bg-white' content={room.name}>
                        <CustomImage
                          src={selectedRoomsImage[index]}
                          alt='room'
                          className='h-28 w-24 sm:h-36 md:h-44 md:w-32 my-2'
                          onClick={() => handleImageClick(room.id, index)}
                        />
                      </Tooltip>
                    ) : room.hold ? (
                      <CustomImage
                        src={bookedRoomsImage[index]}
                        alt='book room'
                        className='cursor-not-allowed h-28 w-24 sm:h-36 md:h-44 md:w-32'
                      />
                    ) : room.selected ? (
                      <Tooltip placement='top' color='invert' className='bg-white' content={room.name}>
                        <CustomImage
                          src={selectedRoomsImage[index]}
                          alt='room'
                          className='h-28 w-24 sm:h-36 md:h-44 md:w-32 my-2'
                          onClick={() => handleImageClick(room.id, index)}
                        />
                      </Tooltip>
                    ) : (
                      <Tooltip placement='top' color='invert' className='bg-white' content={room.name}>
                        <CustomImage
                          src={roomsImage[index]}
                          alt='room'
                          className='h-28 w-24 sm:h-36 md:h-44 md:w-32 my-2'
                          onClick={() => handleImageClick(room.id, index)}
                        />
                      </Tooltip>
                    )}
                  </div>
                ))}