Badge Component
   Parameters:
   - text: string - Text to display in the badge (required)
   - type: string - Badge type/color (optional, default: 'secondary')
     Values: primary, secondary, success, danger, warning, info, light, dark
   - pill: boolean - Whether to display as a pill badge (optional, default: false)
   - positioned: boolean - Whether to position the badge (optional, default: false)
   - position: object - Position settings when positioned is true (optional)
     - top: string - Top position (e.g., '0')
     - start: string - Start position (e.g., '100')
   - class: string - Additional CSS classes (optional)
   - visually_hidden: string - Hidden text for screen readers (optional)

    ThemedComponent::make("content/badge")
	->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
	->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
	->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->class('value') //string - Additional CSS classes (optional)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->pill('value') //boolean - Whether to display as a pill badge (optional, default: false)
	->position('value') //object - Position settings when positioned is true (optional)
	->positioned('value') //boolean - Whether to position the badge (optional, default: false)
	->start('value') //string - Start position (e.g., '100')
	->text('value') //string - Text to display in the badge (required)
	->top('value') //string - Top position (e.g., '0')
	->type('value') //string - Badge type/color (optional, default: 'secondary')
	->visually_hidden('value') //string - Hidden text for screen readers (optional)
	->render();

// Basic badge with default style
echo ThemedComponent::make('content/badge')
    ->text('Default')
    ->render();

// Badges with different colors
echo ThemedComponent::make('content/badge')
    ->text('Primary')
    ->type('primary')
    ->render();

echo ThemedComponent::make('content/badge')
    ->text('Success')
    ->type('success')
    ->render();

// Pill-shaped badges
echo ThemedComponent::make('content/badge')
    ->text('Info')
    ->type('info')
    ->pill(true)
    ->render();

echo ThemedComponent::make('content/badge')
    ->text('Warning')
    ->type('warning')
    ->pill(true)
    ->render();

// Button with positioned notification badge
echo ThemedComponent::make('layout/wrapper')
    ->tag('button')
    ->class('btn btn-primary position-relative')
    ->content(
        'Inbox ' .
        ThemedComponent::make('content/badge')
            ->text('99+')
            ->type('danger')
            ->positioned(true)
            ->position(['top' => '0', 'start' => '100'])
            ->visually_hidden('unread messages')
            ->render()
    )
    ->render();

// Profile button with dot indicator
echo ThemedComponent::make('layout/wrapper')
    ->tag('button')
    ->class('btn btn-primary position-relative')
    ->content(
        'Profile ' .
        ThemedComponent::make('content/badge')
            ->text('')
            ->class('p-2 border border-light rounded-circle')
            ->type('danger')
            ->positioned(true)
            ->position(['top' => '0', 'start' => '100'])
            ->visually_hidden('New alerts')
            ->render()
    )
    ->render();

// Badges in different heading sizes
echo ThemedComponent::make('layout/wrapper')
    ->tag('h1')
    ->content(
        'Heading 1 ' .
        ThemedComponent::make('content/badge')
            ->text('New')
            ->render()
    )
    ->render();

echo ThemedComponent::make('layout/wrapper')
    ->tag('h3')
    ->content(
        'Heading 3 ' .
        ThemedComponent::make('content/badge')
            ->text('Latest')
            ->type('info')
            ->render()
    )
    ->render();

{# Badge Component
   Parameters:
   - text: string - Text to display in the badge (required)
   - type: string - Badge type/color (optional, default: 'secondary')
     Values: primary, secondary, success, danger, warning, info, light, dark
   - pill: boolean - Whether to display as a pill badge (optional, default: false)
   - positioned: boolean - Whether to position the badge (optional, default: false)
   - position: object - Position settings when positioned is true (optional)
     - top: string - Top position (e.g., '0')
     - start: string - Start position (e.g., '100')
   - class: string - Additional CSS classes (optional)
   - visually_hidden: string - Hidden text for screen readers (optional)
#}

{%- set type = content.type|default('secondary') -%}
{%- set classes = [
    'badge',
    content.pill ? 'rounded-pill',
    'text-bg-' ~ type,
    content.positioned ? 'position-absolute top-' ~ (content.position.top|default('0')) ~ ' start-' ~ (content.position.start|default('100')) ~ ' translate-middle',
    content.class
]|filter(v => v)|join(' ') -%}

<span class="{{ classes }}">
    {{- content.text -}}
    {%- if content.visually_hidden -%}
        <span class="visually-hidden">{{ content.visually_hidden }}</span>
    {%- endif -%}
</span>