import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";

import { cn } from "./cn";

/*
 * Base UI's Separator is always `role="separator"` with an `aria-orientation`;
 * it has no notion of a decorative one. Radix has `decorative`, and both
 * GoodSync products were on its default of `true` — so every divider they ship
 * is currently hidden from assistive technology, and every divider NOKL ships
 * is announced. Seventeen call sites across the two products, not one of which
 * passes the prop or separates anything a screen reader needs told about: they
 * are lines between sections of a settings page.
 *
 * So `decorative` defaults to true here. A divider that carries no meaning
 * should not be read out, and making that the default is what keeps the common
 * case correct without every call site opting in. `decorative={false}` gets Base
 * UI's semantics back for the rare separator that genuinely delimits content.
 *
 * The override works because Base UI puts its own role and aria-orientation
 * first in the props it merges, so anything passed in wins. A contract test
 * pins that, since it is the kind of ordering a dependency can quietly change.
 */

export interface SeparatorProps extends SeparatorPrimitive.Props {
  /**
   * Hides the separator from assistive technology. True for a line that is
   * only a visual divider, which is almost always what a separator is.
   * @default true
   */
  decorative?: boolean;
}

function Separator({
  className,
  orientation = "horizontal",
  decorative = true,
  ...props
}: SeparatorProps) {
  return (
    <SeparatorPrimitive
      data-slot="separator"
      orientation={orientation}
      className={cn(
        "shrink-0 bg-(color:--color-border)",
        // Base UI emits `data-orientation="horizontal|vertical"`. Tailwind's
        // shorthand `data-horizontal:` compiles to exactly this selector and
        // works — measured, because the shorthand reads like an
        // attribute-presence test and is not one. The long form is used anyway:
        // this package ships literal classes for the consumer's own Tailwind to
        // compile, and a built-in shorthand that a consumer's version does not
        // map would fail the same silent way — background kept, only dimension
        // lost, rendering a zero-high invisible rule.
        "data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full",
        // `self-stretch` rather than `h-full`: a vertical rule almost always
        // sits in a flex row, where `h-full` resolves against a parent that has
        // no height of its own and collapses to nothing.
        "data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
        className,
      )}
      {...(decorative
        ? { role: "none" as const, "aria-orientation": undefined }
        : null)}
      {...props}
    />
  );
}

export { Separator };