import React from 'react';
import PropTypes from 'prop-types';
import LazyImage from '~hooks/lazy-image';
import styles from './variable.module.scss';
import NotificationBubble from '../../../../../static/images/notification-bubble.svg';
import Bell from '../../../../../static/images/bell.svg';

const VariableComponent = ({ pageContext, section }) => (
  <div className={styles?.variableContainer || ''}>
    <LazyImage
      alt="Notification bubble"
      width={16}
      height={16}
      src={NotificationBubble}
      disableLazyLoad
    />
    <LazyImage alt="Notification bell" width={24} height={24} src={Bell} disableLazyLoad />
  </div>
);

VariableComponent.propTypes = {
  pageContext: PropTypes.shape({}),
  section: PropTypes.shape({}),
};

export default VariableComponent;
