const { useBlockProps } = wp.blockEditor;

const isEntryEmpty = ( entry ) => {
  return (
    ! entry.year?.trim() &&
    ! entry.title?.trim() &&
    ! entry.description?.trim() &&
    ! entry.imageUrl?.trim()
  );
};

export default function Save({ attributes }) {
  const { entries = [] } = attributes;

  // Filter out empty entries.
  const filteredEntries = entries.filter( ( entry ) => ! isEntryEmpty( entry ) );

  return (
    <div {...useBlockProps.save()}>
      {filteredEntries.map( ( entry, i ) => (
        <div className="ojb-journey-entry" key={i}>
          {entry.year && <h4>{entry.year}</h4>}
          {entry.title && <h3>{entry.title}</h3>}
          {entry.description && <p>{entry.description}</p>}
          {entry.imageUrl && <img src={entry.imageUrl} alt="Journey" />}
        </div>
      ) )}
    </div>
  );
}