{{-- Image Component --}}
@php
    $src = $component['content']['src'] ?? '';
    $alt = $component['content']['alt'] ?? '';
    $width = $component['content']['width'] ?? '100%';
    $height = $component['content']['height'] ?? 'auto';
    $alignment = $component['content']['alignment'] ?? 'left';
    $rounded = $component['content']['rounded'] ?? false;
    $shadow = $component['content']['shadow'] ?? false;
@endphp

@if($src)
    <div class="image-wrapper text-{{ $alignment }}">
        <img src="{{ $src }}"
             alt="{{ $alt }}"
             style="width: {{ $width }}; height: {{ $height }};"
             class="img-fluid {{ $rounded ? 'rounded' : '' }} {{ $shadow ? 'shadow' : '' }}">
    </div>
@endif

<style>
    .image-wrapper {
        margin: 1rem 0;
    }

    .image-wrapper img {
        max-width: 100%;
        height: auto;
    }
</style>