src/sections/information/index.tsx

import { SiZenn } from "react-icons/si";
import { FaDirections } from "react-icons/fa";
import { BsSpeedometer2, BsSpeedometer, BsPinMapFill } from "react-icons/bs";
import { BiSolidCity, BiSolidRename } from "react-icons/bi";
import { FaMapLocationDot } from "react-icons/fa6";
import { Poi } from "../../redux/types/Poi";
import ParentSize from "@visx/responsive/lib/components/ParentSize";
import SimpleChart from "../../components/charts/singleChart/SimpleChart";

type InformationSectionProps = {
  selectedPoi: Poi;
};

const InformationSection: React.FC<InformationSectionProps> = ({
  selectedPoi,
}) => {
  const streetSpecs = [
    {
      label: "Average speed",
      icon: <BsSpeedometer2 style={{ fontSize: "25px" }} />,
      value: selectedPoi
        ? selectedPoi?.data.section?.avg_speed.toString().slice(0, 4)
        : "n/a" + "km/h",
    },
    {
      label: "Commune",
      icon: <BiSolidCity style={{ fontSize: "25px" }} />,
      value: selectedPoi ? selectedPoi?.data.section?.commune : "n/a",
    },
    {
      label: "Department",
      icon: <FaMapLocationDot style={{ fontSize: "25px" }} />,
      value: selectedPoi ? selectedPoi?.data.section?.department : "n/a",
    },
    {
      label: "Length",
      icon: <SiZenn style={{ fontSize: "25px" }} />,
      value: selectedPoi ? selectedPoi?.data.section?.length : "n/a" + "m",
    },
    {
      label: "Max speed",
      icon: <BsSpeedometer style={{ fontSize: "25px" }} />,
      value: selectedPoi
        ? selectedPoi?.data.section?.max_speed
        : "n/a" + "km/h",
    },
    {
      label: "Name",
      icon: <BiSolidRename style={{ fontSize: "25px" }} />,
      value: (
        <p style={{ fontSize: "15px", marginTop: "5%" }}>
          {selectedPoi ? selectedPoi?.data.section?.name : "n/a"}
        </p>
      ),
    },
    {
      label: "Directions",
      icon: <FaDirections style={{ fontSize: "25px" }} />,
      value: selectedPoi ? selectedPoi?.data.section?.nbr_direction : "n/a",
    },
    {
      label: "Region",
      icon: <BsPinMapFill style={{ fontSize: "25px" }} />,
      value: selectedPoi ? selectedPoi?.data.section?.region : "n/a",
    },
  ];
  return (
    <div className="blockSection">
      <div className="blockInformation">
        <div className="weekDistributionTitle">Section Information</div>
        {streetSpecs.map((object, index) => (
          <div className="blockInformationBackground">
            <div className="blockInformationContent">
              <p
                style={{
                  width: "60%",
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "space-around",
                }}
              >
                {object.label}
                {object.icon}
              </p>
              <p>{object.value}</p>
            </div>
          </div>
        ))}
      </div>
      <div className="blockSimpleChart">
        <div className="weekDistributionTitle">Top 10 Trafic Origin</div>
        <ParentSize>
          {({ width, height }) => (
            <SimpleChart
              data={selectedPoi?.data.origin_top_10}
              width={width}
              height={height}
            />
          )}
        </ParentSize>
      </div>
    </div>
  );
};

export default InformationSection;