/* eslint-disable react/prop-types */
import { GiGamepad } from '@react-icons/all-files/gi/GiGamepad';
import { GiPresent } from '@react-icons/all-files/gi/GiPresent';

import React, { useContext } from 'react';
import { TiImage } from '@react-icons/all-files/ti/TiImage';
import { translate } from 'gatsby-core-theme/src/helpers/getters';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import styles from './game-score-gauge.module.scss';

const ScoreGaugeColumn = ({ Icon, label, rating, max }) => (
  <div className={styles?.scoreGaugeContainer || ''}>
    <div className={styles?.firstCategory || ''}>
      <div className={styles?.graphics || ''}>
        <Icon color="#2498ab" size="2.9rem" />
      </div>
      <p>{label}</p>
      <div className={styles?.score || ''}>
        <span className={styles?.rating || ''}>{rating}</span>
        <span className={styles?.ten || ''}>/{max}</span>
      </div>
      <div className={styles?.linearGradient || ''} />
    </div>
  </div>
);

const ScoreGauge = ({ page }) => {
  const { translations } = useContext(Context) || {};
  const { relation } = page;
  return (
    <div className={styles?.scoreGauge || ''}>
      <div className={styles?.containerGauge || ''}>
        <ScoreGaugeColumn
          Icon={TiImage}
          label={translate(translations, 'grafikk', 'Grafikk')}
          rating={Math.floor(relation?.second_rating * 2)}
          max={10}
        />
        <ScoreGaugeColumn
          Icon={GiPresent}
          label={translate(translations, 'bonuser', 'Bonuser')}
          rating={Math.floor(relation?.third_rating * 2)}
          max={10}
        />
        <ScoreGaugeColumn
          Icon={GiGamepad}
          label={translate(translations, 'spillopplevelse', 'Spillopplevelse')}
          rating={Math.floor(relation?.fourth_rating * 2)}
          max={10}
        />
      </div>
    </div>
  );
};

export default ScoreGauge;
