/*
Desafío 4 de 4: Lista con un separador 
Este ejemplo renderiza un famoso haiku de Tachibana Hokushi, con cada línea envuelta en una etiqueta <p>. 
Tu trabajo consiste en insertar un separador <hr /> entre cada párrafo. La estructura resultante debería verse así:

<article>
  <p>Escribo, borro y reescribo</p>
  <hr />
  <p>Borro de nuevo, y luego</p>
  <hr />
  <p>Florece una amapola.</p>
</article>

Un haiku solo tiene tres líneas, pero tu solución debería funcionar con cualquier número de líneas. 
Fíjate que los elementos <hr /> solo aparecen entre los elementos <p>, ¡no en el inicio o el final!
*/

import { Fragment } from "react/cjs/react.production.min";

const poem = {
  lines: [
    "Escribo, borro y reescribo",
    "Borro de nuevo, y luego",
    "Florece una amapola.",
  ],
};

export default function Poem() {
  return (
    <article>
      {poem.lines.map((line, index) => {
        return (
          <Fragment key={index}>
            {index > 0 && <hr />}
            <p>{line}</p>
          </Fragment>
        );
      })}
    </article>
  );
}