import React from 'react'

import { GridProps, ObjectProps } from './Grid.types'

import { handleColumns } from './Grid.helpers'

import './Grid.css'

export default ({ children, className, columns }: GridProps) => {
  const cols: ObjectProps = handleColumns(columns)

  return (
    <div
      className={`${className} grid ${cols.default} ${cols.xs} ${cols.sm} ${cols.md} ${cols.lg} ${cols.xl}`}
    >
      {children}
    </div>
  )
}
