{{-- A notice in the page: a state that needs saying — storage is full, the link has expired.

     Not an M3 component (M3's banner is gone); drawn in M3's terms: the state's container colour
     (tinted, never filled), a medium corner, the state's icon, a title-small `title`, body-medium
     text from `description` or the slot, and an `actions` slot for one or two text buttons.
     `color` (alias `tone`): `info` (the default), `success`, `warning`, `error`, `primary`,
     `secondary`, `tertiary`, or `neutral` for surface-container-high. `icon` replaces the state's
     icon; `:icon="false"` drops it. `dismissible` adds a close button that hides it in the browser,
     40px drawn with the 48px target M3 asks for (ACT-18).

     It is a `role="status"`, whatever its colour: an alert is usually part of the page as it
     renders, and `role="alert"` is an assertive live region that some screen readers announce over
     the page title on load — and that a Livewire morph re-announces. `assertive` opts into
     `role="alert"` for the case the prop is named after: a notice put on screen in answer to
     something the person just did (ACT-36). M3 publishes no banner; the nearest thing it does
     publish, the snackbar, says polite and never assertive.

     Drawn by resources/css/components/alert.css from `data-md-alert` and `data-md-color`; the
     dismiss button carries only the foundation's interaction classes. --}}

@props([
    'title' => null,
    'description' => null,
    'color' => null,
    'tone' => null,
    'icon' => null,
    'dismissible' => false,
    'assertive' => false,
])

@php
    $color = in_array($color ?? $tone, ['info', 'success', 'warning', 'error', 'primary', 'secondary', 'tertiary', 'neutral'], true) ? ($color ?? $tone) : 'info';

    $icon = $icon === false ? null : ($icon ?? [
        'info' => 'info', 'success' => 'check_circle', 'warning' => 'warning', 'error' => 'error',
        'primary' => 'info', 'secondary' => 'info', 'tertiary' => 'info', 'neutral' => 'info',
    ][$color]);
@endphp

<div
    role="{{ $assertive ? 'alert' : 'status' }}"
    @if ($dismissible) x-data="{ shown: true }" x-show="shown" x-transition.opacity @endif
    data-md-alert
    data-md-color="{{ $color }}"
    {{ $attributes }}
>
    @if ($icon)
        <x-livewire-material::icon :name="$icon" filled />
    @endif

    <div data-md-alert-content>
        @if ($title)
            <p data-md-alert-title>{{ $title }}</p>
        @endif

        @if ($description || $slot->isNotEmpty())
            <div data-md-alert-description>{{ $description ?? $slot }}</div>
        @endif

        @isset($actions)
            <div data-md-alert-actions>{{ $actions }}</div>
        @endisset
    </div>

    @if ($dismissible)
        <button type="button" class="md-state-layer md-focus-ring md-touch-target" data-md-alert-dismiss aria-label="{{ __('Dismiss') }}" x-on:click="shown = false">
            <x-livewire-material::icon name="close" size="20" />
        </button>
    @endif
</div>