import React, { FC, ReactNode, RefObject } from 'react';
import classNames from 'classnames';

export interface GridColumnProps {
  children?: ReactNode;
  columns: Array<string>;
  push?: Array<string>;
  pull?: Array<string>;
  offset?: Array<string>;
  divRef?: RefObject<HTMLDivElement>;
  className?: unknown;
}

const GridColumn: FC<GridColumnProps> = ({
  children,
  columns = [],
  pull = [],
  push = [],
  offset = [],
  divRef,
  className,
}) => (
  <div
    className={classNames(
      className ? className : '',
      columns.map(x => 'mila-column-' + x),
      push.map(x => 'mila-push-' + x),
      pull.map(x => 'mila-pull-' + x),
      offset.map(x => 'mila-offset-' + x),
    )}
    {...(divRef ? { ref: divRef } : null)}
  >
    {children}
  </div>
);

export default GridColumn;