import type { ForwardedRef, ForwardRefExoticComponent } from 'react';
import React, { forwardRef } from 'react';
import classNames from 'classnames';

import type { Spacing } from '../../types';

export interface SpacerProps {
  /**
   * Allow the component to grow.
   *
   * @default false
   */
  grow?: boolean;
  /**
   * Set the size of the component.
   * @type boolean | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | '3xl' | '4xl'
   * @default 'lg'
   */
  size?: boolean | Spacing;
}

export const Spacer: ForwardRefExoticComponent<SpacerProps> = forwardRef(function Spacer(
  { grow = false, size = true, ...rest }: SpacerProps,
  forwardedRef: ForwardedRef<HTMLSpanElement>
) {
  return (
    <span
      {...rest}
      ref={forwardedRef}
      className={classNames('spacer', {
        ['spacer--size']: size === true,
        ['spacer--noSize']: size === false,
        ['spacer--size4xl']: size === '4xl',
        ['spacer--size3xl']: size === '3xl',
        ['spacer--sizeXxl']: size === 'xxl',
        ['spacer--sizeXl']: size === 'xl',
        ['spacer--sizeLg']: size === 'lg',
        ['spacer--sizeMd']: size === 'md',
        ['spacer--sizeSm']: size === 'sm',
        ['spacer--sizeXs']: size === 'xs',
        ['spacer--sizeXxs']: size === 'xxs',
        ['spacer--grow']: grow === true,
        ['spacer--noGrow']: grow === false,
      })}
    />
  );
});