---
// With explicit `size`: `spinner-{type}-{size}`. Without `size`: `spinner-{type}-{argCount}` (e.g. spinner-border-2).
import { includeArgCount } from '@shared/lib/include-args'

interface Props {
  element?: 'div' | 'span'
  type?: string
  color?: string
  size?: string
  class?: string
}

const { element: Element = 'div', type = 'border', color, size, class: className } = Astro.props

const includeArgKeys = ['element', 'type', 'color', 'size', 'class'] as const
const argCount = includeArgCount(Astro.props as Record<string, unknown>, includeArgKeys)
// include['size'] → explicit value, else the arg count meta-property.
const sizeValue = size !== undefined ? size : argCount || undefined

const classes = [`spinner-${type}`, color && `text-${color}`, sizeValue && `spinner-${type}-${sizeValue}`, className]
---

<Element class:list={classes} role="status" />