import PropTypes from 'prop-types';
import cx from "../../../utils/css/cx.js";
import { useContainerBreakpointIsAtMost } from "../../../hooks/breakpoint/index.js";
import RacesToWatch from '../RacesToWatch';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
export default function EmbedRacesWatchHP({
  contestIds,
  collectionId,
  headline,
  description,
  overflow = 'auto'
}) {
  const isSm = useContainerBreakpointIsAtMost('sm');
  let overflowScroll;
  switch (overflow) {
    case 'scroll':
      overflowScroll = true;
      break;
    case 'wrap':
      overflowScroll = false;
      break;
    default:
      overflowScroll = isSm;
      break;
  }
  return <div className={cls('container')}>
      <RacesToWatch eyebrow={{
      isLive: true
    }} contestIds={contestIds} collectionId={collectionId} headline={headline} description={description} overflowScroll={overflowScroll} />
    </div>;
}
EmbedRacesWatchHP.defaultProps = {
  contestIds: [],
  collectionId: undefined,
  headline: undefined,
  description: undefined,
  overflow: 'auto'
};
EmbedRacesWatchHP.propTypes = {
  /**
   * An array of contest IDs to include explicitly
   */
  contestIds: PropTypes.arrayOf(PropTypes.string),
  /**
   *  The ID of the contest collection to use
   */
  collectionId: PropTypes.string,
  /**
  * A custom headline for the module
  */
  headline: PropTypes.string,
  /**
  * A custom description for the module
  */
  description: PropTypes.string,
  /**
   * A string to customize the wrap behavior
   */
  overflow: PropTypes.oneOf(['scroll', 'wrap', 'auto'])
};