<div class="rounded-md border p-4 shadow-sm {{this.toneClass}}" ...attributes>
    <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
        <div class="flex min-w-0 items-start gap-3">
            <div class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md {{this.iconClass}}">
                <FaIcon @icon={{or @icon "circle-info"}} />
            </div>
            <div class="min-w-0">
                <h4 class="text-sm font-bold">{{@title}}</h4>
                {{#if @message}}
                    <p class="mt-1 text-sm leading-5 opacity-80">{{@message}}</p>
                {{/if}}
                {{#if @note}}
                    <p class="mt-2 text-xs leading-5 opacity-70">{{@note}}</p>
                {{/if}}
            </div>
        </div>

        {{#if (or @primaryAction @secondaryAction)}}
            <div class="flex flex-shrink-0 flex-wrap items-center gap-2 md:justify-end">
                {{#if @secondaryAction}}
                    <Button @type="default" @size="xs" @icon={{@secondaryIcon}} @text={{@secondaryText}} @onClick={{@secondaryAction}} />
                {{/if}}
                {{#if @primaryAction}}
                    <Button @type="primary" @size="xs" @icon={{@primaryIcon}} @text={{@primaryText}} @onClick={{@primaryAction}} />
                {{/if}}
            </div>
        {{/if}}
    </div>
</div>
