import * as React from 'react';
import { clsx } from 'clsx';

export interface SeparatorProps extends React.ComponentPropsWithoutRef<'hr'> {
  orientation?: 'horizontal' | 'vertical';
}

export function Separator({ orientation = 'horizontal', className, ...props }: SeparatorProps) {
  if (orientation === 'vertical') {
    return (
      <div
        role="separator"
        aria-orientation="vertical"
        className={clsx('h-full w-px bg-[var(--bl-border,#2a2a4a)]', className)}
        {...(props as React.HTMLAttributes<HTMLDivElement>)}
      />
    );
  }

  return (
    <hr
      role="separator"
      aria-orientation="horizontal"
      className={clsx('border-t border-[var(--bl-border,#2a2a4a)]', className)}
      {...props}
    />
  );
}
