---
import type { SlBadge } from '@shoelace-style/shoelace';

interface Props extends Omit<SlBadge, any>{
    /** The badge's theme variant. */
    variant?: 'primary' | 'success' | 'neutral' | 'warning' | 'danger';
    /** Draws a pill-style badge with rounded edges. */
    pill?: boolean;
    /** Makes the badge pulsate to draw attention. */
    pulse?: boolean;
}

const { variant = "primary", pill, pulse, ...rest } = Astro.props;

---

<sl-badge {variant} {pill} {pulse} {...rest}>
    <slot />
</sl-badge>

<script>
    import '@shoelace-style/shoelace/dist/components/badge/badge.js';
</script>