/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable react/forbid-prop-types */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { translate } from 'gatsby-core-theme/src/helpers/getters';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import styles from './staticColumn.module.scss';

const Index = ({ details, rating, bonus, topFeatures, banking, licenses, hideRow }) => {
  const { translations } = useContext(Context) || {};

  return (
    <div className={styles?.columStatic || ''}>
      <tr style={{ height: details + 1 }} id="details">
        <td>{translate(translations, 'casino_name', 'Casino Name')}</td>
      </tr>
      <tr style={{ height: rating }} id="rating">
        <td>{translate(translations, 'rating', 'Rating')}</td>
      </tr>
      <tr style={{ height: bonus }} id="bonus">
        <td>{translate(translations, 'bonus', 'Bonus')}</td>
      </tr>

      <tr style={{ height: topFeatures, display: hideRow ? 'none' : null }} id="topFeatures">
        <td>{translate(translations, 'top_features', 'Top Features')}</td>
      </tr>
      <tr style={{ height: banking, display: hideRow ? 'none' : null }} id="banking">
        <td>{translate(translations, 'banking', 'Banking')}</td>
      </tr>
      <tr style={{ height: licenses, display: hideRow ? 'none' : null }} id="licenses">
        <td>{translate(translations, 'licenses', 'Licenses')}</td>
      </tr>
    </div>
  );
};
Index.propTypes = {
  details: PropTypes.number,
  rating: PropTypes.number,
  bonus: PropTypes.number,
  topFeatures: PropTypes.number,
  banking: PropTypes.number,
  licenses: PropTypes.number,
  hideRow: PropTypes.bool,
};
export default Index;
