/* eslint-disable no-unused-expressions */
/* eslint-disable no-nested-ternary */
/* eslint-disable no-underscore-dangle */
import React from 'react';
import PropTypes from 'prop-types';
import { formatDate } from '../../../../../gatsby-core-theme/helpers/lotto';
import styles from '../fixtures.module.scss';


const SportstakeHeader = ({ fixture }) => {
    if (!fixture) {return;}

    const nrOfFixtures = fixture?._id?.split('-')[1];
    const formattedDate = formatDate(fixture?.drawDate, 'dd/MMM/yy');
    return (
      <div className={styles.sportstakeHeader}>
        <p>{`Fixtures List for ${nrOfFixtures} (Provisional) ${formattedDate}`} </p>
      </div>
    );
}

export default SportstakeHeader;

SportstakeHeader.propTypes = {
    fixture: PropTypes.shape({
      _id: PropTypes.string,
      drawDate: PropTypes.string,
      drawDetails: PropTypes.shape({
        games: PropTypes.shape({}),
        divs: PropTypes.shape({}),
      }),
      more_info: PropTypes.shape({}),
      toss_results: PropTypes.shape({
        winnerData: PropTypes.arrayOf(PropTypes.shape({})),
      }),
      winnerData: PropTypes.arrayOf(PropTypes.shape({})),
    }),
  };
  