tabler/shared/ui/Payment.astro

---
import type { AvatarSize } from './Avatar.astro'
import type { PaymentProvider } from '@shared/lib/tokens'

interface Props {
  /** provider from the `$payment-providers` SCSS list */
  payment: PaymentProvider
  dark?: boolean
  /** core/scss/_variables.scss `$payment-sizes` (aliased to `$avatar-sizes`) */
  size?: AvatarSize | undefined
  class?: string
  /** accessible name (role="img" + aria-label) */
  ariaLabel?: string | undefined
  /** remaining attributes (id, data-*, aria-*, …) are forwarded to the root element */
  [key: string]: unknown
}

const { payment, dark, size, class: className, ariaLabel, ...rest } = Astro.props

// Only an explicit `size` becomes `payment-{size}`.
const classes = ['payment', size && `payment-${size}`, `payment-provider-${payment}${dark ? '-dark' : ''}`, className]
---

<span class:list={classes} role={ariaLabel ? 'img' : undefined} aria-label={ariaLabel} {...rest}></span>