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

import { CommonProps } from '../common';

export interface DividerProps extends CommonProps {
  /**
   * Horizontal margin size. When it is not defined, 0px will be applied.
   */
  marginX?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
  /**
   * Vertical margin size. When it is not defined, 0px will be applied.
   */
  marginY?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
  /**
   * Vertical or Horizontal divider.
   */
  variant?: 'horizontal' | 'vertical';
}

const Divider = ({
  marginX,
  marginY,
  variant = 'horizontal',
  id,
  className,
  style,
  sx = {},
  'data-test-id': dataTestId,
}: DividerProps): ReactElement => (
  <StyledDivider
    id={id}
    className={className}
    style={{ ...style, ...css(sx) }}
    data-test-id={dataTestId}
    themeVariant={variant}
    themeMarginX={marginX}
    themeMarginY={marginY}
  />
);

export default Divider;