---

import classNames from 'classnames';
import { Divider as ExchangeDivider } from 'exchange-elements/v2';

import styles from './index.module.scss';

import type { ComponentProps } from 'react';

export type ExchangeDividerProps = ComponentProps<typeof ExchangeDivider>;

export interface DividerProps extends Omit<ExchangeDividerProps, 'pt'> {
  classNameDivider?: string;
}

export function Divider({
  classNameDivider,
  direction = 'horizontal',
  ...props
}: DividerProps) {
  return (
    <ExchangeDivider
      {...props}
      direction={direction}
      pt={{
        divider: {
          className: classNames(
            styles.divider,
            styles[`divider_${direction}`],
            classNameDivider,
          ),
        },
      }}
    />
  );
}

















.divider {
  flex-shrink: 0;
  box-sizing: border-box;
  background-color: var(--neutral-7);

  &_horizontal {
    width: 100%;
    height: var(--borderWidth-md);
    margin: var(--space-0250) 0;
  }

  &_vertical {
    width: var(--borderWidth-md);
    height: 100%;
    margin: 0 var(--space-0250);
  }
}