---
// Text shimmer (.text-shimmer): a highlight that sweeps across a short label, such as "Thinking…", while something is in progress.

interface Props {
  /** element to render; a `span` fits inline text, a `div` a block */
  as?: 'span' | 'div'
  /** puts a `.text-shimmer-loader` (a small spinner) before the label, inside the shimmer */
  loader?: boolean
  /** tells assistive technology that the label reports progress and can change */
  live?: boolean
  class?: string
  /** remaining attributes (id, data-*, …) are forwarded to the root element */
  [key: string]: unknown
}

const { as: Tag = 'span', loader = false, live = false, class: className, ...rest }: Props = Astro.props
---

<Tag class:list={['text-shimmer', className]} role={live ? 'status' : undefined} aria-live={live ? 'polite' : undefined} {...rest}>
  {loader && <span class="text-shimmer-loader" aria-hidden="true" />}
  <slot />
</Tag>