Alert

<x-shopper::alert
    color="warning"
    title="Attention Required"
    message="Please review your settings before proceeding."
    icon="heroicon-o-exclamation-triangle"
/>

<x-shopper::alert
    color="info"
    title="Information"
    message="This is an informational message to help guide the user."
    icon="heroicon-o-information-circle"
/>

<x-shopper::alert
    color="success"
    title="Success"
    message="Your changes have been saved successfully."
    icon="heroicon-o-check-circle"
/>

<x-shopper::alert
    color="warning"
    title="Warning"
    message="This action may have unintended consequences."
    icon="heroicon-o-exclamation-triangle"
/>

<x-shopper::alert
    color="danger"
    title="Error"
    message="Something went wrong. Please try again or contact support."
    icon="heroicon-o-x-circle"
/>

<x-shopper::alert
    color="info"
    message="You can create alerts without a title for simpler messages."
/>

<x-shopper::alert
    color="warning"
    title="Note"
    message="This alert has no icon."
    :icon="false"
/>

<x-shopper::card title="Product Settings">
    <x-shopper::alert
        color="warning"
        message="Changing the SKU will affect inventory tracking."
        icon="heroicon-o-exclamation-triangle"
        class="mb-4"
    />

    <form>
        <!-- Form fields -->
    </form>
</x-shopper::card>

@php
    use Filament\Support\Enums\IconSize;
@endphp

@props([
    'message',
    'color' => 'warning',
    'title' => null,
    'icon' => null,
    'iconSize' => IconSize::Medium,
])

@php
    if (! $iconSize instanceof IconSize) {
        $iconSize = filled($iconSize) ? IconSize::tryFrom($iconSize) ?? $iconSize : null;
    }

    $containerClass = \Illuminate\Support\Arr::toCssClasses([
        'rounded-lg p-4 ring-1',
        match ($color) {
            'info' => 'bg-info-50 ring-info-200 dark:ring-info-400/20 dark:bg-info-800/30',
            'danger' => 'bg-danger-50 ring-danger-200 dark:ring-danger-400/20 dark:bg-danger-800/30',
            'success' => 'bg-success-50 ring-success-200 dark:ring-success-400/20 dark:bg-success-800/30',
            'warning' => 'bg-warning-50 ring-warning-200 dark:ring-warning-400/20 dark:bg-warning-800/30',
            default => 'bg-custom-50 ring-custom-200 dark:ring-custom-400/20 dark:bg-custom-800/30',
        },
    ]);
@endphp

<div {{ $attributes->twMerge(['class' => $containerClass]) }}>
    <div class="flex gap-3">
        @if ($icon)
            <div class="shrink-0">
                <x-filament::icon :icon="$icon" :class="$iconClasses" />
            </div>
        @endif

        <div>
            @if ($title)
                <h3 @class([$titleClasses])>{{ $title }}</h3>
            @endif

            <p @class([$messageClasses])>
                {{ $message }}
            </p>
        </div>
    </div>
</div>