"use client"

import * as React from "react"

import { cn } from "../../lib/utils"
import { space, type SpaceValue } from "./spacer"

/**
 * `Divider` is replacement for `@wordpress/components`' `__experimentalDivider` -
 * **148 sites across 51 files**.
 *
 * WHY THIS IS AN ADAPTER AND NOT `ui/separator`. The obvious move is to swap it for the Radix
 * `Separator` we already have. That would change the line's COLOUR on every one of those 148 sites:
 *
 * WP `border-bottom: 1px solid currentColor` inherits the surrounding TEXT colour
 * Radix `bg-border` a fixed token, independent of context
 *
 * Read out of `@wordpress/components/build/divider/styles.js`, whose `DividerView` is
 * `styled.hr` with `border: 0; margin: 0;` and then, for a horizontal divider,
 * `border-bottom: 1px solid currentColor`, `height: 0`, `width: auto`, and margins from `space()`.
 * Several of our dividers sit inside muted or coloured containers, so "inherits the text colour" is
 * not a detail - it is the reason they look right where they are. This reproduces the geometry
 * exactly, and adopting it is a one-line import swap.
 *
 * The `margin` prop is on WP's 4px spacing grid, NOT a CSS length. `margin="2"` is **8px**, not 2px.
 * That is `space()`, imported from `ui/spacer` rather than re-implemented here - it is a verbatim
 * reproduction of WP's helper and is exhaustively tested by `__tests__/spacer.test.tsx`, so there is
 * exactly one copy of that rule in the codebase. Our tree uses `margin="2"` (130 sites), `"8"` (15),
 * `"1"`, `"0.5"`, and one dynamic expression.
 *
 * Reproduced ONLY as far as our call sites go, on purpose - the same rule the Spacer adapter
 * follows. `orientation` (vertical), `marginStart` and `marginEnd` are NOT accepted: nothing in the
 * tree passes them, and leaving them out means reaching for one is a compile error rather than a prop
 * that is silently ignored. Add them here, with the vertical branch from WP's styles.js, if a call
 * site ever needs them.
 *
 * Margins are emitted as `marginTop`/`marginBottom` LONGHANDS rather than a shorthand, for the same
 * reason the Spacer adapter does it: no dependence on CSSOM shorthand-override semantics agreeing
 * between jsdom and Chrome.
 */

export interface DividerProps
  extends Omit<React.ComponentProps<"hr">, "children"> {
  /** WP spacing-grid value: a bare number/numeric string is × 4px; a CSS length is used verbatim. */
  margin?: SpaceValue
}

function Divider({ className, margin, style, ...props }: DividerProps) {
  const resolved = space(margin)

  return (
    <hr
      data-slot="divider"
      className={cn("border-0 border-b border-b-current h-0 w-auto", className)}
      style={{
        // Undefined margins emit nothing at all, matching WP: `space(undefined)` is undefined, and an
        // undefined style value is dropped by React rather than written as "undefined".
        marginTop: resolved,
        marginBottom: resolved,
        ...style,
      }}
      {...props}
    />
  )
}

export { Divider }