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";
import { formatDate } from "../../utils/formatDate";
import { FaLocationDot } from "react-icons/fa6";
import { TbWorldLatitude, TbWorldLongitude } from "react-icons/tb";
import { BiTimeFive } from "react-icons/bi";

type DemographicsSectionProps = {
  selectedPoi: Poi;
};
const DescriptionSection: React.FC<DemographicsSectionProps> = ({
  selectedPoi,
}) => {
  return (
    <div className="sectionBasicInfoOne">
      <div className="basicInfoLabelsOne">
        <FaLocationDot style={{ fontSize: "25px", marginRight: "10px" }} />
        {selectedPoi ? selectedPoi?.address : "unknown"}
      </div>
      <div className="basicInfoLabelsOne">
        <TbWorldLatitude style={{ fontSize: "25px", marginRight: "10px" }} />
        {selectedPoi ? selectedPoi?.lat : "unknown"}
      </div>
      <div className="basicInfoLabelsOne">
        <TbWorldLongitude style={{ fontSize: "25px", marginRight: "10px" }} />
        {selectedPoi ? selectedPoi?.lng : "unknown"}
      </div>
      <div className="basicInfoLabelsOne">
        <BiTimeFive style={{ fontSize: "25px", marginRight: "10px" }} />
        {selectedPoi ? formatDate(selectedPoi?.ts_updated) : "unknown"}
      </div>
    </div>
  );
};

export default DescriptionSection;