/* eslint-disable import/no-extraneous-dependencies */
import React, { useRef } from 'react';
import PropTypes from 'prop-types';

import ScrollX from 'gatsby-core-theme/src/hooks/scroll-x';
import styles from './comparison-table.module.scss';
import Table from './table';

export default function ComparisonTable({ module, page, modulePosition }) {
  const ele = useRef('');

  return (
    <div className={styles?.comparisonTable || ''}>
      <ScrollX refTag={ele} scroll>
        <div ref={ele} className={styles?.contentTable || ''}>
          <Table type={page?.relation_type} items={module?.items} tempate={page?.template} modulePosition={modulePosition} />
        </div>
      </ScrollX>
    </div>
  );
}

ComparisonTable.propTypes = {
  module: PropTypes.shape({
    items: PropTypes.arrayOf(PropTypes.shape({})),
  }),
  page: PropTypes.shape({
    relation_type: PropTypes.string,
    type: PropTypes.string,
    template: PropTypes.string,
  }),
  modulePosition: PropTypes.number,
};
