import { property } from 'lit/decorators.js'
import { watch } from '../../internal/watch.js'
import componentStyles from '../../styles/component.styles.js'
import TerraElement from '../../internal/terra-element.js'
import styles from './divider.styles.js'
import type { CSSResultGroup } from 'lit'

/**
 * @summary Dividers are used to visually separate or group elements.
 * @documentation https://terra-ui.netlify.app/components/divider
 * @status stable
 * @since 1.0
 *
 * @cssproperty --terra-divider-color - The color of the divider.
 * @cssproperty --terra-divider-width - The width of the divider.
 * @cssproperty --terra-divider-spacing - The spacing of the divider.
 */
export default class TerraDivider extends TerraElement {
    static styles: CSSResultGroup = [componentStyles, styles]

    /** Draws the divider in a vertical orientation. */
    @property({ type: Boolean, reflect: true }) vertical = false

    connectedCallback() {
        super.connectedCallback()
        this.setAttribute('role', 'separator')
    }

    @watch('vertical')
    handleVerticalChange() {
        this.setAttribute(
            'aria-orientation',
            this.vertical ? 'vertical' : 'horizontal'
        )
    }
}
