/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable react/forbid-prop-types */
import React from 'react';
import PropTypes from 'prop-types';

import useTranslate from '~hooks/useTranslate/useTranslate';
import styles from './staticColumn.module.scss';

const Index = ({ details, rating, bonus, topFeatures, banking, licenses, hideRow }) => (
  <div className={styles?.columStatic || ''}>
    <tr style={{ height: details + 1 }} id="details">
      <td>{useTranslate('casino_name', 'Casino Name')}</td>
    </tr>
    <tr style={{ height: rating }} id="rating">
      <td>{useTranslate('rating', 'Rating')}</td>
    </tr>
    <tr style={{ height: bonus }} id="bonus">
      <td>{useTranslate('bonus', 'Bonus')}</td>
    </tr>

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