import React, { FunctionComponent } from 'react';
import { GridColumnProps } from './types.d';

export const GridColumn: FunctionComponent<GridColumnProps> = ({
  children,
  className,
  col,
  horizontalAlignment,
  id,
  offset,
  ref,
  style,
  verticalAlignment,
}) => (
  <div
    className={`
    grid-column 
    grid-column-${col} 
    ${className ?? ''} 
    grid-column-vertical-${verticalAlignment ?? ''} 
    grid-column-horizontal-${horizontalAlignment ?? ''} 
    grid-column-offset-${offset ?? ''}`}
    style={style}
    id={id}
    ref={ref}
  >
    {children}
  </div>
);
