{{--Send messages with Session::flash('msg|MESSAGE HERE','success, caution or danger');--}}
{{--Can also use helper fuction: sendMessage('Test Message','danger')--}}
@props(['message','messageType'])
@php
    $div_classes = 'flex justify-between mx-auto max-w-2xl text-sm rounded-md px-3 py-1 mb-2 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 'danger':
            $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;

        default:
            $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>