import React from 'react';
import PropTypes from 'prop-types';
import WinningNumbers from './winning-numbers';
import Rollover from './rollover';
import LottoTable from './lotto-table';
import styles from './lotto-module.module.scss';

const LottoModule = ({ serverData, page }) => {
  const { template, extra_fields: extraFields } = page || {};
  const { operator } = extraFields || {};
  const { latestDrawResults } = serverData;

  return (
    latestDrawResults &&
    latestDrawResults.map((draw) => (
      <div className={styles.row}>
        <WinningNumbers
          data={draw}
          lotteryName={draw.lottery}
          template={template}
          operator={operator}
        />
        <Rollover data={draw} lotteryName={draw.lottery} template={template} operator={operator} />
        <LottoTable
          data={draw}
          lotteryName={draw.lottery}
          template={template}
          operator={operator}
        />
      </div>
    ))
  );
};

export default LottoModule;

LottoModule.propTypes = {
  page: PropTypes.shape({
    template: PropTypes.string,
    extra_fields: PropTypes.shape({
      operator: PropTypes.shape({}),
    }),
  }),
};
