<script lang="ts">
  export let type: 'success' | 'error' | 'warning' | 'info' = 'info';
  export let message: string;
  export let duration: number = 5000;
  export let dismissible: boolean = true;
  
  let visible = true;
  let timeoutId: NodeJS.Timeout;
  
  // Auto-dismiss after duration
  if (duration > 0) {
    timeoutId = setTimeout(() => {
      visible = false;
    }, duration);
  }
  
  function dismiss() {
    if (timeoutId) clearTimeout(timeoutId);
    visible = false;
  }
  
  // Cleanup timeout on destroy
  import { onDestroy } from 'svelte';
  onDestroy(() => {
    if (timeoutId) clearTimeout(timeoutId);
  });
  
  // Style mapping
  const typeStyles = {
    success: {
      container: 'bg-success-50 border-success-200 text-success-800',
      icon: 'text-success-400'
    },
    error: {
      container: 'bg-error-50 border-error-200 text-error-800',
      icon: 'text-error-400'
    },
    warning: {
      container: 'bg-warning-50 border-warning-200 text-warning-800',
      icon: 'text-warning-400'
    },
    info: {
      container: 'bg-blue-50 border-blue-200 text-blue-800',
      icon: 'text-blue-400'
    }
  };
  
  // Icon mapping
  const typeIcons = {
    success: 'M5 13l4 4L19 7',
    error: 'M6 18L18 6M6 6l12 12',
    warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z',
    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
  };
</script>

{#if visible}
  <div class="fixed top-4 right-4 max-w-sm w-full z-50 animate-slide-up">
    <div class="rounded-lg border p-4 shadow-lg {typeStyles[type].container}">
      <div class="flex items-start">
        <div class="flex-shrink-0">
          <svg 
            class="h-5 w-5 {typeStyles[type].icon}" 
            fill="none" 
            stroke="currentColor" 
            viewBox="0 0 24 24"
          >
            <path 
              stroke-linecap="round" 
              stroke-linejoin="round" 
              stroke-width="2" 
              d={typeIcons[type]}
            />
          </svg>
        </div>
        
        <div class="ml-3 flex-1">
          <p class="text-sm font-medium">
            {message}
          </p>
        </div>
        
        {#if dismissible}
          <div class="ml-4 flex-shrink-0">
            <button
              type="button"
              class="inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 {typeStyles[type].icon} hover:opacity-75"
              on:click={dismiss}
            >
              <span class="sr-only">Cerrar</span>
              <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        {/if}
      </div>
    </div>
  </div>
{/if}

<style>
  @keyframes slide-up {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  .animate-slide-up {
    animation: slide-up 0.3s ease-out;
  }
</style>