Typography Component
    A Bootstrap 5 component for consistent and flexible text styling with comprehensive typography options.

    Parameters:
    Core Options:
        - tag: string - HTML tag to use (h1-h6, p, span, etc.) (default: 'p')
        - content: string - The text content (required)
        - class: string - Additional CSS classes
        - attributes: array - Additional HTML attributes

    Display Options:
        - display: string - Display heading size
            Values: '1', '2', '3', '4', '5', '6'
        - lead: boolean - Use lead paragraph style (default: false)
        - responsive: boolean - Enable responsive font sizing (default: false)

    Text Style Options:
        - muted: boolean - Use muted text color (default: false)
        - monospace: boolean - Use monospace font (default: false)
        - font: string - Font weight
            Values: 'light', 'normal', 'bold'
        - font_style: string - Font style
            Values: 'italic', 'normal'

    Text Formatting Options:
        - align: string - Text alignment
            Values: 'start', 'center', 'end', 'justify'
        - transform: string - Text transformation
            Values: 'lowercase', 'uppercase', 'capitalize'
        - decoration: string - Text decoration
            Values: 'underline', 'line-through', 'none'
        - wrap: string - Text wrapping
            Values: 'wrap', 'nowrap', 'break'
        - truncate: boolean - Truncate with ellipsis (default: false)

    Example Usage:
    {{ component('content/typography', {
        tag: 'h1',
        content: 'Welcome to Our Site',
        display: '1',
        align: 'center',
        font: 'bold'
    }) }}

    Paragraph Example:
    {{ component('content/typography', {
        content: 'This is a lead paragraph with custom styling.',
        lead: true,
        font_style: 'italic',
        class: 'mb-4'
    }) }}

    Responsive Example:
    {{ component('content/typography', {
        content: 'Responsive text that adapts to screen size',
        responsive: true,
        align: 'center',
        transform: 'uppercase'
    }) }}

    ThemedComponent::make("content/typography")
	->content('value') //string - The text content (required) (always set this first)
	->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)
	->align('value') //string - Text alignment
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->class('value') //string - Additional CSS classes
	->decoration('value') //string - Text decoration
	->display('value') //string - Display heading size
	->font('value') //string - Font weight
	->font_style('value') //string - Font style
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->lead('value') //boolean - Use lead paragraph style (default: false)
	->monospace('value') //boolean - Use monospace font (default: false)
	->muted('value') //boolean - Use muted text color (default: false)
	->responsive('value') //boolean - Enable responsive font sizing (default: false)
	->tag('value') //string - HTML tag to use (h1-h6, p, span, etc.) (default: 'p')
	->transform('value') //string - Text transformation
	->truncate('value') //boolean - Truncate with ellipsis (default: false)
	->wrap('value') //string - Text wrapping
	->render();

// Basic headings
echo ThemedComponent::make('content/typography')
    ->tag('h1')
    ->content('Heading 1')
    ->render();

echo ThemedComponent::make('content/typography')
    ->tag('p')
    ->content('This is a regular paragraph with normal text.')
    ->render();

echo ThemedComponent::make('content/typography')
    ->tag('p')
    ->lead(true)
    ->content('This is a lead paragraph that stands out at the beginning of a section.')
    ->render();

Heading 1

This is a regular paragraph with normal text.

This is a lead paragraph that stands out at the beginning of a section.

// Display headings
echo ThemedComponent::make('content/typography')
    ->tag('h1')
    ->display('1')
    ->content('Display 1 Heading')
    ->render();

// Text styles and alignment
echo ThemedComponent::make('content/typography')
    ->tag('p')
    ->align('center')
    ->transform('uppercase')
    ->font('bold')
    ->content('Centered, uppercase, and bold text')
    ->render();

// Muted text with decoration
echo ThemedComponent::make('content/typography')
    ->tag('p')
    ->muted(true)
    ->decoration('underline')
    ->content('Muted and underlined text')
    ->render();

Display 1 Heading

Centered, uppercase, and bold text

Muted and underlined text

// Responsive text
echo ThemedComponent::make('content/typography')
    ->tag('p')
    ->responsive(true)
    ->content('This text changes size across different breakpoints')
    ->render();

// Monospace with wrapping
echo ThemedComponent::make('content/typography')
    ->tag('p')
    ->monospace(true)
    ->wrap('nowrap')
    ->content('This is monospace text that does not wrap to new lines')
    ->render();

// Font styles with truncation
echo ThemedComponent::make('content/typography')
    ->tag('div')
    ->font_style('italic')
    ->truncate(true)
    ->content('This is a very long text that will be truncated with an ellipsis at the end because it exceeds the container width.')
    ->render();

This text changes size across different breakpoints

This is monospace text that does not wrap to new lines

{# Typography Component
    A Bootstrap 5 component for consistent and flexible text styling with comprehensive typography options.

    Parameters:
    Core Options:
        - tag: string - HTML tag to use (h1-h6, p, span, etc.) (default: 'p')
        - content: string - The text content (required)
        - class: string - Additional CSS classes
        - attributes: array - Additional HTML attributes

    Display Options:
        - display: string - Display heading size
            Values: '1', '2', '3', '4', '5', '6'
        - lead: boolean - Use lead paragraph style (default: false)
        - responsive: boolean - Enable responsive font sizing (default: false)

    Text Style Options:
        - muted: boolean - Use muted text color (default: false)
        - monospace: boolean - Use monospace font (default: false)
        - font: string - Font weight
            Values: 'light', 'normal', 'bold'
        - font_style: string - Font style
            Values: 'italic', 'normal'

    Text Formatting Options:
        - align: string - Text alignment
            Values: 'start', 'center', 'end', 'justify'
        - transform: string - Text transformation
            Values: 'lowercase', 'uppercase', 'capitalize'
        - decoration: string - Text decoration
            Values: 'underline', 'line-through', 'none'
        - wrap: string - Text wrapping
            Values: 'wrap', 'nowrap', 'break'
        - truncate: boolean - Truncate with ellipsis (default: false)

    Example Usage:
    {{ component('content/typography', {
        tag: 'h1',
        content: 'Welcome to Our Site',
        display: '1',
        align: 'center',
        font: 'bold'
    }) }}

    Paragraph Example:
    {{ component('content/typography', {
        content: 'This is a lead paragraph with custom styling.',
        lead: true,
        font_style: 'italic',
        class: 'mb-4'
    }) }}

    Responsive Example:
    {{ component('content/typography', {
        content: 'Responsive text that adapts to screen size',
        responsive: true,
        align: 'center',
        transform: 'uppercase'
    }) }}
#}

{% set tag = content.tag|default('p') %}
{% set classes = [] %}

{# Base classes #}
{% if content.display %}
    {% set classes = classes|merge(['display-' ~ content.display]) %}
{% endif %}

{% if content.lead %}
    {% set classes = classes|merge(['lead']) %}
{% endif %}

{% if content.muted %}
    {% set classes = classes|merge(['text-muted']) %}
{% endif %}

{# Alignment #}
{% if content.align %}
    {% set classes = classes|merge(['text-' ~ content.align]) %}
{% endif %}

{# Transformation #}
{% if content.transform %}
    {% set classes = classes|merge(['text-' ~ content.transform]) %}
{% endif %}

{# Decoration #}
{% if content.decoration %}
    {% set classes = classes|merge(['text-decoration-' ~ content.decoration]) %}
{% endif %}

{# Font weight #}
{% if content.font %}
    {% set classes = classes|merge(['fw-' ~ content.font]) %}
{% endif %}

{# Font style #}
{% if content.font_style %}
    {% set classes = classes|merge(['fst-' ~ content.font_style]) %}
{% endif %}

{# Text wrapping #}
{% if content.wrap %}
    {% set classes = classes|merge(['text-' ~ content.wrap]) %}
{% endif %}

{# Truncate #}
{% if content.truncate %}
    {% set classes = classes|merge(['text-truncate']) %}
{% endif %}

{# Monospace #}
{% if content.monospace %}
    {% set classes = classes|merge(['font-monospace']) %}
{% endif %}

{# Responsive font sizing #}
{% if content.responsive %}
    {% set classes = classes|merge(['fs-1', 'fs-sm-2', 'fs-md-3', 'fs-lg-4', 'fs-xl-5']) %}
{% endif %}

{# Additional classes #}
{% if content.class %}
    {% set classes = classes|merge([content.class]) %}
{% endif %}

<{{ tag }}
    class="{{ classes|join(' ')|trim }}"
    {% if content.attributes %}
        {% for attr, value in content.attributes %}
            {{ attr }}="{{ value }}"
        {% endfor %}
    {% endif %}
>
    {{ content.content|raw }}
</{{ tag }}>