---
import type { HTMLAttributes } from 'astro/types'
import type { BadgeProps } from './badge'

import styles from './badge.module.scss'

export type Props = BadgeProps<HTMLAttributes<'span'>>

const {
    theme,
    hover,
    small,
    rounded,
    transparent,
    className,
    ...rest
} = Astro.props

const classes = [
    styles.badge,
    theme && styles[theme],
    hover && styles.hover,
    small && styles.small,
    rounded && styles.round,
    transparent && styles.transparent,
    className
]
---

<span class:list={classes} {...rest}>
    <slot />
</span>