import classnames from 'classnames';
import { useStoryCollection } from "../../../../hooks/election/index.js";
import ElectionCaretLink from "../../ElectionCaretLink/index.js";
import { prependContext } from "../../../../utils/tracking/index.js";
import SectionTitle from '../SectionTitle';
import classes from './styles.module.scss';
const LinkSection = function LinkSection(props) {
  const {
    format,
    title,
    storyCollectionTag,
    numberCollectionStories,
    links,
    tracking
  } = props;
  const collection = useStoryCollection(storyCollectionTag);
  const collectionStories = collection.stories.slice(0, numberCollectionStories).map(story => ({
    label: story.headline.text,
    link: story.url
  }));
  const allLinks = [...links, ...collectionStories];
  const trackingOpts = {
    context: prependContext({
      prefix: tracking?.context,
      context: 'StoryCollection'
    })
  };
  return <div className={classnames(classes.container, classes[format])}>
      <SectionTitle>
        {title}
      </SectionTitle>

      <div className={classes.links}>
        {allLinks.map(link => <div key={link.link} className={classes.link}>
            <ElectionCaretLink tracking={trackingOpts} to={link.link} text={link.label} />
          </div>)}
      </div>
    </div>;
};
LinkSection.defaultProps = {
  links: [],
  numberCollectionStories: 3
};
export default LinkSection;