import cx from "../../../../utils/css/cx.js";
import IfActive from "../../../application/IfActive/index.js";
import ElectionLink from "../../ElectionLink/index.js";
import Byline from './Byline';
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const Story = function Story(props) {
  const {
    headline,
    image,
    authors,
    url,
    tracking
  } = props;
  if (!url) {
    return null;
  }
  return <div>
      <ElectionLink to={url} tracking={tracking}>
        <div className={cls('link')}>
          <div className={cls('cover-art-container')}>
            <img src={image.url} alt={image.alt} />
          </div>

          <div className={cls('headline')}>
            {headline.text}
          </div>
        </div>
      </ElectionLink>

      <IfActive active={authors && authors.length > 0}>
        <div className={cls('byline-container')}>
          <Byline authors={authors} tracking={tracking} />
        </div>
      </IfActive>
    </div>;
};
export default Story;