import React from "react";
import { Poi } from "../../redux/types/Poi";
import DemographicsSection from "../../sections/demographics";
import DescriptionSection from "../../sections/description";
import FootfallSection from "../../sections/footfall";
import ModeSection from "../../sections/mode";
import InformationSection from "../../sections/information";
import TraficSection from "../../sections/trafic";

type GraphSectionsProps = {
  selectedPoi: Poi;
  isDemographicsSection: boolean;
  isFootfallSection: boolean;
  isModeSection: boolean;
  isInformationSection: boolean;
  isTraficSection: boolean;
};

const GraphSections = ({
  selectedPoi,
  isDemographicsSection,
  isFootfallSection,
  isModeSection,
  isInformationSection,
  isTraficSection,
}: GraphSectionsProps) => {
  const renderSection = (state: boolean, section: JSX.Element) => {
    return state ? section : null;
  };

  return (
    <>
      <DescriptionSection selectedPoi={selectedPoi} />
      {renderSection(
        isDemographicsSection,
        <DemographicsSection selectedPoi={selectedPoi} />
      )}
      {renderSection(
        isFootfallSection,
        <FootfallSection selectedPoi={selectedPoi} />
      )}
      {renderSection(isModeSection, <ModeSection selectedPoi={selectedPoi} />)}
      {renderSection(
        isInformationSection,
        <InformationSection selectedPoi={selectedPoi} />
      )}
      {renderSection(
        isTraficSection,
        <TraficSection selectedPoi={selectedPoi} />
      )}
    </>
  );
};

export default GraphSections;