import * as React from 'react'
import { cn } from '../lib/cn'

export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
  orientation?: 'horizontal' | 'vertical'
  /** Use the fainter hairline token. */
  subtle?: boolean
}

/**
 * Hairline divider. Uses `line` / `line-subtle` tokens (never a raw color);
 * spec 114's --line* tokens satisfy the border-proximity rule (within 0.04 L of
 * the surface).
 */
export const Divider = React.forwardRef<HTMLHRElement, DividerProps>(
  ({ className, orientation = 'horizontal', subtle = false, ...props }, ref) => (
    <hr
      ref={ref}
      aria-orientation={orientation}
      className={cn(
        'border-0',
        subtle ? 'bg-line-subtle' : 'bg-line',
        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
        className,
      )}
      {...props}
    />
  ),
)
Divider.displayName = 'Divider'