import React, { FC, ReactNode } from 'react';
import classnames from 'classnames';
import css from './index.module.css';

export interface ColumnsProps {
  children?: ReactNode;
  customClass?: string;
}

const customTableCSS = css.columnsPricingtable;

const Columns: FC<ColumnsProps> = ({ children, customClass }) => (
  <div
    className={classnames([
      css.columns,
      {
        [`${customTableCSS}`]: customClass,
      },
    ])}
  >
    {React.Children.map(children, (child, index) => (
      <div key={index} className={css.columns__item}>
        {child && child}
      </div>
    ))}
  </div>
);

export default Columns;