rooms images

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { loadRooms } from "../store/actions/roomAction";

import single_basic from "../images/single-basic.jpeg";
import single_standard from "../images/single-standard.jpeg";
import single_economy from "../images/single-economy.jpeg";
import single_deluxe from "../images/single-deluxe.jpeg";
import double_deluxe from "../images/double-deluxe.jpeg";
import double_basic from "../images/double-basic.jpeg";
import double_economy from "../images/double-economy.jpeg";
import double_standard from "../images/double-standard.jpeg";
import family_standard from "../images/family-standard.jpeg";
import family_basic from "../images/family-basic.jpeg";
import family_economy from "../images/family-economy.jpeg";
import family_deluxe from "../images/family-deluxe.jpeg";
import presidential from "../images/presidential.jpeg";

class Room extends Component {
  componentDidMount() {
    this.props.loadRooms();
  }
  render() {
    let { rooms } = this.props;
    return rooms.map((room) => (
      <article className="room" key={room._id}>
        <div className="img-container">
          <img
            src={
              room.room_key === "single_basic"
                ? `${single_basic}`
                : room.room_key === "single_standard"
                ? `${single_standard}`
                : room.room_key === "single_economy"
                ? `${single_economy}`
                : room.room_key === "single_deluxe"
                ? `${single_deluxe}`
                : room.room_key === "double_basic"
                ? `${double_basic}`
                : room.room_key === "double_standard"
                ? `${double_standard}`
                : room.room_key === "double_economy"
                ? `${double_economy}`
                : room.room_key === "double_deluxe"
                ? `${double_deluxe}`
                : room.room_key === "family_basic"
                ? `${family_basic}`
                : room.room_key === "family_economy"
                ? `${family_economy}`
                : room.room_key === "family_standard"
                ? `${family_standard}`
                : room.room_key === "family_economy"
                ? `${family_economy}`
                : room.room_key === "family_deluxe"
                ? `${family_deluxe}`
                : `${presidential}`
            }
            alt={`${room.name}`}
          />
          <div className="price-top">
            <h6>BDT {room.price}</h6>
            <p>per night</p>
          </div>
          <Link
            to={`/rooms/${room.room_key}`}
            className="btn-primary room-link"
          >
            features
          </Link>
        </div>
        <p className="room-info">{room.name}</p>
      </article>
    ));
  }
}
const mapStateToProps = (state) => ({
  rooms: state.rooms,
});
export default connect(mapStateToProps, { loadRooms })(Room);