import { css } from 'glamor';
import { observer } from 'mobx-react';
import { useApphouse } from '../context/useApphouse';
import React from 'react';
import { setAlpha } from '../utils/color/setAlpha';
interface SeparatorProps {
  /**
   * The thickness of the separator
   * @default 1
   * @optional
   */
  thickness?: number;
  /**
   * The orientation of the separator
   * @default "horizontal"
   */
  orientation?: 'horizontal' | 'vertical';
  /**
   * The alpha value (from 0 to 1) to be applied to the separator
   * @default 0.1
   * @optional
   */
  alpha?: number;
  /**
   * The gap between the separator and the content
   * @default tokens.spacings.s
   */
  gap?: number | string;
}
export const Separator: React.FC<SeparatorProps> = observer(
  ({ thickness = 1, orientation = 'horizontal', alpha = 0.1, gap }) => {
    const { theme } = useApphouse();
    const { tokens, colors } = theme;
    const _gap = gap || tokens.spacings.s;
    if (orientation === 'horizontal') {
      return (
        <div
          {...css({
            width: '100%',
            height: `${thickness}px`,
            backgroundColor: setAlpha(colors.onPrimary, alpha),
            marginTop: _gap,
            marginBottom: _gap
          })}
        />
      );
    }

    return <div {...css({ width: thickness, height: '100%' })} />;
  }
);