/* ============================================================================
 * 서명전에 — TDS Border 컴포넌트
 *  · 요소 간 구분선 또는 구간 나눔 스페이서
 *  · props:
 *      variant  "full" (기본) — 전체 너비 hairline
 *               "padding24"   — 좌우 24px 여백 두고 hairline
 *               "height16"    — 선 없이 16px 높이의 투명 스페이서
 *      height   string — variant="height16" 일 때만 유효. 기본 16px.
 *      className, style — 패스스루
 *  · 모든 시각 속성은 components.css 의 TDS 토큰 참조 (--separator 등)
 * ========================================================================== */

function Border({
  variant = "full",
  height,
  className = "",
  style,
  ...rest
}) {
  const cls = ["border", `border--${variant}`, className]
    .filter(Boolean)
    .join(" ");

  // height prop 은 variant="height16" 일 때만 적용
  const mergedStyle =
    variant === "height16" && height
      ? { ...(style || {}), height }
      : style;

  return (
    <div
      role="separator"
      aria-orientation={variant === "height16" ? undefined : "horizontal"}
      className={cls}
      style={mergedStyle}
      {...rest}
    />
  );
}

window.Border = Border;

Object.assign(window, { Border });