import * as React from 'react';
import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';

import { classNames } from '../../lib/utils';

const Separator = React.forwardRef<HTMLDivElement, SeparatorPrimitive.Props>(
  function Separator({ className, orientation = 'horizontal', ...props }, ref) {
    return (
      <SeparatorPrimitive
        data-slot="separator"
        orientation={orientation}
        className={classNames(
          'shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
          className
        )}
        {...props}
        ref={ref}
      />
    );
  }
);

export { Separator };