import React from "react";
const Building = ({
  building,
  toggleBuilding,
  expandedBuildings,
  getContent,
}) => {
  return (
    <React.Fragment key={building.id}>
      <tr className="overflow-auto">
        <td
          colSpan="4"
          className="text-start"
          style={{
            background: "#fafafa",
            cursor: "pointer",
            textAlign: "center!important",
          }}
          onClick={() => toggleBuilding(building.id)}
        >
          <div className="row table-responsive">
            <h6 style={{ marginBottom: "0px", fontSize: "14px" }}>
              {building.name} &nbsp;
              {expandedBuildings.includes(building.id) ? (
                <i className="bx bx-chevron-down"></i>
              ) : (
                <i className="bx bx-chevron-right"></i>
              )}
            </h6>
          </div>
        </td>
      </tr>

      {expandedBuildings.includes(building.id) && getContent(building)}
    </React.Fragment>
  );
};
export default Building;