---
interface Props {
  color?: string | undefined
  animated?: boolean
  /** accessible name (visually-hidden text inside the dot) */
  ariaLabel?: string
  class?: string
  /** remaining attributes (id, data-*, aria-*, …) are forwarded to the root element */
  [key: string]: unknown
}

const { color, animated, ariaLabel, class: className, ...rest } = Astro.props

const classes = ['status-dot', color && `status-${color}`, animated && 'status-dot-animated', className]
---

<span class:list={classes} {...rest}>{ariaLabel && <span class="visually-hidden">{ariaLabel}</span>}</span>