import PropTypes from 'prop-types';
import ModuleTitle from "../ModuleTitle/index.js";
import { useStoryCollection } from "../../../hooks/election/index.js";
import useIsMounted from "../../../hooks/useIsMounted/index.js";
import ItemTimestamp from './ItemTimestamp';
import classes from './styles.module.scss';
const LiveBlogPromoTimeline = function LiveBlogPromoTimeline(props) {
  const {
    tag,
    eyebrow,
    headline,
    description,
    reporterNote,
    maxItems
  } = props;
  const collection = useStoryCollection(tag);
  const isMounted = useIsMounted();
  if (!collection || !isMounted) return null;
  return <div>
      <ModuleTitle eyebrow={eyebrow} headline={headline} description={description} reporterNote={reporterNote} disableBorder />
      <div>
        <ul className={classes.list}>
          {collection.stories.slice(0, maxItems).map(item => <li key={item.link} className={classes.item}>
              <ItemTimestamp timestamp={item.publishedDateTime} />
              {' '}
              <a className={classes.link} href={item.link}>
                {item.title}
              </a>
            </li>)}
        </ul>
      </div>
    </div>;
};
LiveBlogPromoTimeline.defaultProps = {
  reporterNote: undefined,
  eyebrow: undefined,
  headline: undefined,
  description: undefined,
  maxItems: 5
};
LiveBlogPromoTimeline.propTypes = {
  /**
   * The tag of the story collection to use
   */
  tag: PropTypes.string.isRequired,
  /**
   * An optional reporter note to include as an inline annotation for this
   * module. Should be passed through to the `ReporterNote` component.
   */
  reporterNote: PropTypes.shape({}),
  /**
   * Custom configuration for the module eyebrow
   */
  eyebrow: PropTypes.shape({}),
  /**
   * Custom headline
   */
  headline: PropTypes.string,
  /**
   * Custom description
   */
  description: PropTypes.string,
  /**
   * The maximum number of items to display from the list
   */
  maxItems: PropTypes.number
};
export default LiveBlogPromoTimeline;