import type { JSX } from "solid-js";
import { splitProps } from "solid-js";

export interface SeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> {
  /** Visual and ARIA orientation. @default "horizontal" */
  orientation?: "horizontal" | "vertical";
  /** When true, renders role=none (purely visual, not announced). @default false */
  decorative?: boolean;
}

/**
 * A visual divider between sections of content.
 * Non-decorative separators are announced by screen readers.
 */
export function Separator(props: SeparatorProps): JSX.Element {
  const [local, rest] = splitProps(props, ["orientation", "decorative"]);
  const orientation = () => local.orientation ?? "horizontal";
  const isDecorative = () => local.decorative ?? false;

  return (
    <div
      role={isDecorative() ? "none" : "separator"}
      aria-orientation={!isDecorative() && orientation() === "vertical" ? "vertical" : undefined}
      data-orientation={orientation()}
      {...rest}
    />
  );
}
