import { useState, useEffect } from "react";
import { Poi } from "../../redux/types/Poi";
import { convertModeObjectToArray } from "../../utils/convertModeObjectToArray";
import { FaWalking } from "react-icons/fa";
import { AiFillCar } from "react-icons/ai";

type DemographicsSectionProps = {
  selectedPoi: Poi;
};
const ModeSection: React.FC<DemographicsSectionProps> = ({ selectedPoi }) => {
  return (
    //isSelected ?
    <div className="modeSection">
      <div className="sectionModeDivider">
        <div className="weekDistributionTitle">People walking</div>
        <div className="averageModeWrapper">
          {selectedPoi
            ? convertModeObjectToArray(selectedPoi?.data.mode)[0]
            : "20%"}
          <FaWalking style={{ marginLeft: "2%", fontSize: "50px" }} />
        </div>
      </div>
      <div className="sectionModeDivider">
        <div className="weekDistributionTitle">People using vehicles</div>
        <div className="averageModeWrapper">
          {selectedPoi
            ? convertModeObjectToArray(selectedPoi?.data.mode)[1]
            : "20%"}
          <AiFillCar style={{ marginLeft: "2%", fontSize: "50px" }} />
        </div>
      </div>
    </div>
    //) : ( <></>
  );
};

export default ModeSection;