/* eslint-disable react/prop-types */
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import OperatorBonuses from 'gatsby-matrix-theme/src/components/atoms/operator-bonuses';
import OperatorScoreGauge from 'gatsby-matrix-theme/src/components/atoms/operator-score-gauge';
import styles from './operator-welcome-bonus.module.scss';

const OperatorWelcomeBonus = ({ page, numOfStars = 5, modulePosition }) => (
  <div className={styles?.welcomeBonuss || ''}>
    <div className={styles?.containerWelcome || ''}>
      <OperatorBonuses page={page} operator={page?.relation} modulePosition={modulePosition} />
      <OperatorScoreGauge operator={page?.relation} numOfStars={numOfStars} />
    </div>
  </div>
);

export default OperatorWelcomeBonus;
