---
import type { HTMLAttributes } from 'astro/types'
import '../../dist/components/Divider/styles.css'

export type DividerWidth = 'small' | 'large'

/** Same props as React; every HTML attribute is forwarded to the `<hr>`. */
export type Props = HTMLAttributes<'hr'> & {
  /** Espessura da linha: `small` (1px, padrão) ou `large` (2px). */
  width?: DividerWidth
  /** Esconde a linha mantendo o espaço que ela ocupa. */
  invisible?: boolean
  /** @deprecated Use `width`: `1` é `'small'` e `2` é `'large'`. */
  borderWidth?: 1 | 2
  /** @deprecated Use `invisible`. */
  state?: 'visible' | 'invisible'
}

const {
  width,
  invisible,
  borderWidth,
  state,
  class: className,
  ...rest
} = Astro.props

const resolvedWidth: DividerWidth = width ?? (borderWidth === 2 ? 'large' : 'small')
const hidden = invisible ?? state === 'invisible'
---

<hr
  class:list={[
    'au-divider',
    resolvedWidth === 'small' && 'au-divider--width-1',
    resolvedWidth === 'large' && 'au-divider--width-2',
    hidden && 'au-divider--invisible',
    className,
  ]}
  aria-hidden={hidden || undefined}
  {...rest}
/>