function ColumnLayout({ paragraph }) {
  // Split the paragraph into sentences
  const sentences = paragraph.split('. ')

  // Count the number of sentences that contain images
  const imageSentences = sentences.filter((sentence) =>
    sentence.includes('<img')
  )

  let columnCount

  if (imageSentences.length === 1) {
    columnCount = 1
  } else if (imageSentences.length === 2) {
    columnCount = 2
  } else if (imageSentences.length >= 3) {
    columnCount = 3
  } else {
    columnCount = 1 // Default to one column if no images are found
  }

  // Generate an array of columns
  const columns = Array.from({ length: columnCount }, (_, index) => (
    <div key={index} className="column">
      {/* Render the sentences for this column */}
      {imageSentences
        .slice(
          index * (imageSentences.length / columnCount),
          (index + 1) * (imageSentences.length / columnCount)
        )
        .map((sentence, i) => (
          <p key={i}>{sentence}</p>
        ))}
    </div>
  ))

  return <div className="column-layout">{columns}</div>
}

export default ColumnLayout