Image Component
    A component for displaying images with Bootstrap 5 styles.

    Parameters:
    Core Options:
        - src: string - Image source URL (required)
        - alt: string - Alt text for accessibility (required)
        - width: string/int - Width in pixels or percentage
        - height: string/int - Height in pixels or percentage
        - class: string - Additional CSS classes
        - attributes: array - Additional HTML attributes

    Style Options:
        - fluid: boolean - Whether the image should be responsive (img-fluid)
        - thumbnail: boolean - Whether to show the image as a thumbnail (img-thumbnail)
        - rounded: string/boolean - Rounded corners (true for rounded, 'circle' for rounded-circle, 'pill' for rounded-pill)

    Figure Options:
        - figure: boolean - Whether to wrap the image in a figure element
        - caption: string - Caption text (requires figure=true)
        - caption_align: string - Caption alignment (text-start, text-center, text-end)

    ThemedComponent::make("media/image")
	->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)
	->alt('value') //string - Alt text for accessibility (required)
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->caption('value') //string - Caption text (requires figure=true)
	->caption_align('value') //string - Caption alignment (text-start, text-center, text-end)
	->class('value') //string - Additional CSS classes
	->figure('value') //boolean - Whether to wrap the image in a figure element
	->fluid('value') //boolean - Whether the image should be responsive (img-fluid)
	->height('value') //string/int - Height in pixels or percentage
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->rounded('value') //string/boolean - Rounded corners (true for rounded, 'circle' for rounded-circle, 'pill' for rounded-pill)
	->src('value') //string - Image source URL (required)
	->thumbnail('value') //boolean - Whether to show the image as a thumbnail (img-thumbnail)
	->width('value') //string/int - Width in pixels or percentage
	->render();

// Basic image example
echo ThemedComponent::make($component)
    ->src('https://picsum.photos/150')
    ->alt('Example Image')
    ->caption('This is a basic image caption.')
    ->render();

// Advanced image example with additional options
echo ThemedComponent::make($component)
    ->src('https://picsum.photos/300')
    ->alt('Advanced Example Image')
    ->caption('This image has custom dimensions and styling.')
    ->width(300)
    ->height(200)
    ->class('custom-class')
    ->render();

// Image size variations
echo ThemedComponent::make($component)
    ->src('https://picsum.photos/100')
    ->alt('Small Image')
    ->caption('Small size image')
    ->width(100)
    ->render();

echo ThemedComponent::make($component)
    ->src('https://picsum.photos/500')
    ->alt('Large Image')
    ->caption('Large size image')
    ->width(500)
    ->render();

// Image with figure and caption alignment
echo ThemedComponent::make($component)
    ->src('https://picsum.photos/400')
    ->alt('Figure Example Image')
    ->figure(true)
    ->caption('This is a centered figure caption')
    ->caption_align('text-center')
    ->fluid(true)
    ->render();

{# Image Component
    A component for displaying images with Bootstrap 5 styles.

    Parameters:
    Core Options:
        - src: string - Image source URL (required)
        - alt: string - Alt text for accessibility (required)
        - width: string/int - Width in pixels or percentage
        - height: string/int - Height in pixels or percentage
        - class: string - Additional CSS classes
        - attributes: array - Additional HTML attributes

    Style Options:
        - fluid: boolean - Whether the image should be responsive (img-fluid)
        - thumbnail: boolean - Whether to show the image as a thumbnail (img-thumbnail)
        - rounded: string/boolean - Rounded corners (true for rounded, 'circle' for rounded-circle, 'pill' for rounded-pill)

    Figure Options:
        - figure: boolean - Whether to wrap the image in a figure element
        - caption: string - Caption text (requires figure=true)
        - caption_align: string - Caption alignment (text-start, text-center, text-end)
#}

{% if content.figure %}
    <figure class="figure{% if content.class %} {{ content.class }}{% endif %}">
{% endif %}

<img
    src="{{ content.src }}"
    alt="{{ content.alt }}"
    class="
        {% if content.fluid %}img-fluid{% endif %}
        {% if content.thumbnail %}img-thumbnail{% endif %}
        {% if content.rounded == true %}rounded{% endif %}
        {% if content.rounded == 'circle' %}rounded-circle{% endif %}
        {% if content.rounded == 'pill' %}rounded-pill{% endif %}
        {% if content.figure %}figure-img{% endif %}
        {% if not content.figure and content.class %}{{ content.class }}{% endif %}
    "
    {% if content.width %}width="{{ content.width }}"{% endif %}
    {% if content.height %}height="{{ content.height }}"{% endif %}
    {% if content.attributes %}
        {{ content.attributes }}
    {% endif %}
>

{% if content.figure and content.caption %}
    <figcaption class="figure-caption{% if content.caption_align %} {{ content.caption_align }}{% endif %}">
        {{ content.caption }}
    </figcaption>
{% endif %}

{% if content.figure %}
    </figure>
{% endif %}