import React, { ReactElement, ReactNode } from 'react';
import css from '../../../utils/css';

import { CommonProps } from '../../common';
import { space } from '../../../theme/global/space';
import StyledRow from './StyledRow';
import assert from '../../../utils/assert';

type Space = typeof space;
type Gutter = keyof Space | 'none';

export interface RowProps extends CommonProps {
  /**
   * Row's children node.
   */
  children?: ReactNode;
  /**
   * Space between columns, format is [horizontal, vertical].
   *
   * Each value can be none or a space value (xxsmall | xsmall | small | medium | large | xlarge | xxlarge | xxxlarge | xxxxlarge), none corresponds to no space.
   */
  gutter?: [Gutter, Gutter];
}

const Row = ({
  gutter = ['none', 'none'],
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
  children,
}: RowProps): ReactElement => {
  assert(
    gutter.length === 2,
    `[Grid.Row] Gutter:${gutter} doesn't match format [horizontal, vertical]`
  );

  return (
    <StyledRow
      gutter={gutter}
      id={id}
      className={className}
      style={{ ...style, ...css(sx) }}
      data-test-id={dataTestId}
    >
      {children}
    </StyledRow>
  );
};

export default Row;