import React from "react"

function Inline({ spacing = 0, children }) {
  const array = React.Children.toArray(children)

  const className = `flex flex-wrap -m-${spacing}`
  const childClassName = `pl-${spacing} pt-${spacing}`

  return (
    <div className={className}>
      {array.map((child, index) => (
        <div className={childClassName} key={index}>
          {child}
        </div>
      ))}
    </div>
  )
}

export default Inline