@props(['type' => 'info', 'message' => ''])

@php
  $classes = [
      'success' => 'alert-success bg-gradient-success',
      'error' => 'alert-danger bg-gradient-danger',
      'warning' => 'alert-warning bg-gradient-warning',
      'info' => 'alert-info bg-gradient-info',
  ];

  $icons = [
      'success' => 'ni ni-check-bold',
      'error' => 'ni ni-fat-remove',
      'warning' => 'ni ni-fat-attention',
      'info' => 'ni ni-bell-55',
  ];

  $alertClass = $classes[$type] ?? $classes['info'];
  $iconClass = $icons[$type] ?? $icons['info'];
@endphp

<div class="alert {{ $alertClass }} alert-with-icon" role="alert" data-bs-dismiss="alert" aria-label="Close">
  <span class="alert-icon"><i class="{{ $iconClass }}"></i></span>
  <span class="alert-text"><strong>{{ ucfirst($type) }}!</strong> {{ $message }}</span>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<style>
  .alert-with-icon {
    padding: 15px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    color: white;
    font-weight: 500;
  }

  .alert-icon {
    margin-right: 15px;
    font-size: 18px;
    display: flex;
    align-items: center;
  }

  .alert-text {
    flex: 1;
  }

  .btn-close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.8;
    font-size: 20px;
    margin-left: 10px;
  }

  .btn-close:hover {
    opacity: 1;
  }
</style>