---
interface Props {
  payment?: string
  dark?: boolean
  size?: string
  class?: string
  label?: string | undefined
}

const { payment = 'visa', dark, size, class: className, label } = 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={label ? 'img' : undefined} aria-label={label}></span>