import React, { Children, Fragment, isValidElement } from 'react'
import '../tailwind.css'
export interface FormLayoutProps {
  /* Inner content of the application */
  children: React.ReactNode
}

export const FormLayout = ({ children }: FormLayoutProps) => {
  const resolvedChildren = (child: React.ReactNode) => {
    if (!child) return null
    if (isValidElement(child) && child.type === Fragment) {
      return child.props.children
    }
    return child
  }

  const AllChildren = Children.map(children, (child) => resolvedChildren(child))

  return <div className="space-y-6">{AllChildren}</div>
}
