import { Title, Subtitle, Description, Source, Meta, Primary, Stories, Controls } from '@storybook/addon-docs/blocks';
import * as comStories from './badge.stories.json';
import templateSource from './badge.twig?raw';

<Meta of={comStories} />

<Title />
<Subtitle />
<Description />

> ### Bootstrap documentation
> * [Badge examples](https://getbootstrap.com/docs/5.3/components/badge/#examples)
> * [Background colors](https://getbootstrap.com/docs/5.3/components/badge/#background-colors)
> * [Pill badges](https://getbootstrap.com/docs/5.3/components/badge/#pill-badges)
> * [Positioned badges](https://getbootstrap.com/docs/5.3/components/badge/#positioned)

<Primary />

## Properties
<Controls />

<Stories of={comStories} />

## Notes
* `url` renders the badge as an `<a>` tag instead of a `<span>`.
* `icon` accepts a Bootstrap Icon name without the `bi-` prefix. Use `none` to disable.
* `icon_first` controls whether the icon appears before or after the label.
* `indicator: 'dot'` shows a small dot. `indicator: 'count'` shows a count bubble using `indicator_text`.
* `indicator_text` must be a string (e.g. `'99+'`, not `99`).

## Examples

### Example #1: Simple badge
```twig
{% include 'vartheme_bs5_educare:badge' with {
  label: 'New',
  variant: 'text-bg-success',
  size: 'fs-6 px-3 py-2',
  radius: 'rounded-1',
} only %}
```

### Example #2: Badge as link with icon
```twig
{% include 'vartheme_bs5_educare:badge' with {
  label: 'Open',
  url: 'https://example.com',
  variant: 'text-bg-primary',
  size: 'fs-6 px-3 py-2',
  radius: 'rounded-pill',
  icon: 'arrow-right',
  icon_first: false,
} only %}
```

### Example #3: Badge with count indicator
```twig
{% include 'vartheme_bs5_educare:badge' with {
  label: 'Inbox',
  variant: 'text-bg-dark',
  size: 'fs-6 px-3 py-2',
  radius: 'rounded-pill',
  indicator: 'count',
  indicator_text: '99+',
} only %}
```

## Source code
<Source code={templateSource} />
