import classNames from "classnames/dedupe";
import type { AriaAttributes } from "react";
import type { DOMProps } from "../../types/dom";
import "./Divider.css";

export interface DividerProps extends DOMProps {
  className?: string;
  "aria-orientation"?: AriaAttributes["aria-orientation"];
}

const Divider = ({
  "aria-orientation": ariaOrientation = "horizontal",
  className,
  ...rest
}: DividerProps) => {
  const classes = classNames("mobius", "mobius-divider", className);

  return (
    <div
      className={classes}
      role="separator"
      aria-orientation={ariaOrientation}
      {...rest}
    >
      <div className="mobius-divider__inner" />
    </div>
  );
};

Divider.displayName = "Divider";
export { Divider };
