import { divider } from '@trail-ui/theme';
import { useEffect, useMemo, useRef } from 'react';
import { Separator, SeparatorProps } from 'react-aria-components';

export interface DividerProps extends SeparatorProps {}

function Divider(props: DividerProps) {
  const dividerRef = useRef<HTMLHRElement>(null);
  let { className, orientation, ...otherProps } = props;

  const styles = useMemo(
    () =>
      divider({
        orientation,
        className,
      }),
    [orientation, className],
  );

  useEffect(() => {
    dividerRef.current?.setAttribute('aria-hidden', 'true');
    dividerRef.current?.removeAttribute('role');
  }, []);

  return (
    <Separator
      ref={dividerRef}
      className={styles}
      data-orientation={orientation}
      aria-hidden={true}
      {...otherProps}
    />
  );
}
export { Divider };