/* 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 from 'react';
import { TiImage } from '@react-icons/all-files/ti/TiImage';

import useTranslate from '~hooks/useTranslate/useTranslate';
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, numOfStars = 10 }) => {
  const { relation } = page;
  return (
    <div className={styles?.scoreGauge || ''}>
      <div className={styles?.containerGauge || ''}>
        <ScoreGaugeColumn
          Icon={TiImage}
          label={useTranslate('grafikk', 'Grafikk')}
          rating={
            numOfStars < 6 ? relation?.second_rating : Math.floor(relation?.second_rating * 2)
          }
          max={numOfStars}
        />
        <ScoreGaugeColumn
          Icon={GiPresent}
          label={useTranslate('bonuser', 'Bonuser')}
          rating={numOfStars < 6 ? relation?.third_rating : Math.floor(relation?.third_rating * 2)}
          max={numOfStars}
        />
        <ScoreGaugeColumn
          Icon={GiGamepad}
          label={useTranslate('spillopplevelse', 'Spillopplevelse')}
          rating={
            numOfStars < 6 ? relation?.fourth_rating : Math.floor(relation?.fourth_rating * 2)
          }
          max={numOfStars}
        />
      </div>
    </div>
  );
};

export default ScoreGauge;
