/**
 *
 * GeographySection
 *
 */
import React from 'react';
import '../../styles/global.css';

import { DataChip } from '../DataChip';

import styles from './GeographySection.module.css';
import { GeographySectionProps } from './types.js';
import { Heading } from '../Heading';

export const GeographySection: React.FC<GeographySectionProps> = (props) => {
  const { geog, geogIsLoading, headingLevel } = props;

  return (
    <div className={styles.container}>
      {!!geogIsLoading && <p>Loading...</p>}
      <div className={styles.header}>
        {!!geog ? (
          <Heading level={headingLevel}>{geog.title}</Heading>
        ) : (
          <p>Loading...</p>
        )}
      </div>
      <ul className={styles.quickFacts}>
        <li className={styles.quickFact}>
          {!!geog && geog.population >= 0 && (
            <DataChip
              size="S"
              label="Population"
              icon="group"
              value={geog.population}
            />
          )}
        </li>
        <li className={styles.quickFact}>
          {!!geog && geog.blackPopulation >= 0 && (
            <DataChip
              size="S"
              label="Black population"
              icon="group"
              value={geog.blackPopulation}
            />
          )}
        </li>
      </ul>
    </div>
  );
};
