@props(['message','messageType'])
@php
    $messages = [
        'success' => session()->get('success'),
        'error' => session()->get('error'),
        'caution' => session()->get('caution')
    ];
@endphp


@foreach($messages as $messageType => $message)
    @continue(!$message)
    @php

        $div_classes = 'flex justify-between mx-auto max-w-2xl text-sm rounded-md px-3 py-1 mb-5 font-medium ring-1 ring-inset ';
        $button_classes = 'group relative mr-1 h-5 w-5 rounded-sm ';
        $svg_classes = 'h-5 w-5 ';
        switch($messageType) {
            case 'caution':
                $div_classes .= 'bg-yellow-50 text-yellow-800  ring-yellow-600/40';
                $button_classes .= 'hover:bg-yellow-600/20';
                $svg_classes .= 'stroke-yellow-700/50 group-hover:stroke-yellow-700/75';
                break;

            case 'error':
                $div_classes .= 'bg-red-50 text-red-700 ring-red-600/40';
                $button_classes .= 'hover:bg-red-600/20';
                $svg_classes .= 'stroke-red-600/50 group-hover:stroke-red-600/75';
                break;

            case 'success':
                $div_classes .= 'bg-green-50 text-green-700 ring-green-600/40 ';
                $button_classes .= 'hover:bg-green-600/20';
                $svg_classes .= 'stroke-green-700/50 group-hover:stroke-green-700/75';
                break;
        }
    @endphp
    <div class="{{ $div_classes }}" x-data="{ shown: true }" x-show="shown">
        <div>{{ $message }}</div>
        <div>
          <button type="button" class="{{ $button_classes }}" x-on:click=" shown = false">
            <span class="sr-only">Remove</span>
            <svg viewBox="0 0 14 14" class="{{ $svg_classes }}">
              <path d="M4 4l6 6m0-6l-6 6" />
            </svg>
            <span class="absolute -inset-1"></span>
          </button>
        </div>
    </div>
@endforeach