/**
 * Separator - Visual divider component
 * @countermeasure/web-components/primitives/separator
 */

import { resolveContainer } from '../utils'

export interface SeparatorConfig {
  container?: HTMLElement | string
  orientation?: 'horizontal' | 'vertical'
  className?: string
}

export class Separator {
  public readonly el: HTMLDivElement

  constructor(config: SeparatorConfig) {
    const orientation = config.orientation ?? 'horizontal'

    // Create the separator element
    this.el = document.createElement('div')
    this.el.className = `cmm-separator cmm-separator--${orientation}`
    this.el.setAttribute('role', 'separator')
    this.el.setAttribute('aria-orientation', orientation)

    if (config.className) {
      this.el.classList.add(config.className)
    }

    // Mount if container provided
    if (config.container !== undefined) {
      const parent = resolveContainer(config.container)
      parent.appendChild(this.el)
    }
  }

  /** Remove from the DOM */
  destroy(): void {
    this.el.remove()
  }
}
