import React from 'react'

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

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

import './Grid.css'

const Grid = ({ children, className, columns = 1 }: 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>
  )
}

export default Grid
