import * as React from 'react';

// styles
import { styled } from '../../../styles/'


const RootDiv = styled.div(theme => ({
  // borderTop: `solid 1px ${theme.palette.divider}`,
  paddingTop: 24,
}))

const ChildrenList = styled.ul(theme => ({
  display: 'flex',
  alignItems: 'center',
  flexWrap: 'wrap',
  flexDirection: 'column',
  gap: 16,
}))


export default function Group({ children }) {

  const renderChildren = () => {
    if (Array.isArray(children)) {
      return (
        <ChildrenList>
          {children.map((item, index) => (
            <li key={index}>
              {item}
            </li>
          ))}
        </ChildrenList>
      );
    }

    return children;
  }
  return (
    <RootDiv>
      {renderChildren()}
    </RootDiv>
  )
}