/* Stories grid */
function Stories({ stories }) {
  return (
    <section id="work" className="section">
      <div className="section-head">
        <h2 className="section-title">My <em>stories</em>.</h2>
        <div className="section-meta">
          <span className="num">03</span>
          <span>published on wattpad</span>
        </div>
      </div>
      <div className="stories-grid">
        {stories.map((s, i) =>
        <a key={s.title} className="story" href={s.link} target="_blank" rel="noreferrer">
            <div className="story-cover">
              <span className="story-tape" aria-hidden="true"></span>
              {s.coverType === "img" ?
            <img src={s.cover} alt={`${s.title} cover`} /> :
            <object className="svg-cover" type="image/svg+xml" data={s.cover} aria-label={s.title}></object>
            }
            </div>
            <div className="story-genre">{s.genre}</div>
            <h3 className="story-title">{s.title}</h3>
            <p className="story-blurb" style={{ color: "rgb(0, 56, 118)" }}>{s.blurb}</p>
            <div className="story-foot">
              <span className="read">Read on Wattpad <span className="arrow">→</span></span>
              <span className="stat">{s.length}</span>
            </div>
          </a>
        )}
      </div>
    </section>);

}
window.Stories = Stories;