import React from 'react';
import {useIntl} from 'gatsby-plugin-intl';

import * as styles from './mapLegend.module.scss';
import * as EXPLORE_COPY from '../../data/copy/explore';
import DisadvantageDot from '../DisadvantageDot';

const MapLegend = () => {
  const intl = useIntl();
  return (
    <div className={styles.legendContainer}>
      <div>
        Color key
      </div>
      <div className={styles.legendRow}>
        <DisadvantageDot isBig={true} />
        <div className={styles.legendTextBox}>
          <div className={'j40-h4'}>
            {intl.formatMessage(EXPLORE_COPY.LEGEND.PRIORITY_LABEL)}
          </div>
          <p className={'secondary'}>
            {intl.formatMessage(EXPLORE_COPY.LEGEND.PRIORITY_DESCRIPT)}
          </p>
        </div>
      </div>
    </div>
  );
};

export default MapLegend;
