<script>
	import { BellIcon, CheckIcon, GlobeIcon, UserIcon } from 'lucide-svelte';
  import { fly } from 'svelte/transition';

  let notifications = [
    { type: 'alert', message: 'Lena accepted your Paris trip invite!', timestamp: '2m ago', read: false },
    { type: 'update', message: 'New local experience in Kyoto: Tea ceremony with master Takano', timestamp: '1h ago', read: false },
    { type: 'friend', message: 'Marc from your Barcelona hostel wants to connect', timestamp: '4h ago', read: true },
    { type: 'success', message: 'Your Bali itinerary is ready! 3 locals joined the plan', timestamp: '1d ago', read: true }
  ];

  function markAllRead() {
    notifications = notifications.map(n => ({ ...n, read: true }));
  }
</script>

<div class="min-h-screen ">
 

  <main class="max-w-2xl mx-auto p-4 space-y-6">
    <div class="flex items-center justify-between mb-8">
      <h1 class="text-3xl font-bold flex items-center gap-2">
        <GlobeIcon class="w-8 h-8 text-accent" />
        Journey Updates
      </h1>
      <button on:click={markAllRead} class="btn btn-sm btn-outline">Mark all as read</button>
    </div>

    {#if notifications.length === 0}
      <div class="text-center p-8 rounded-xl bg-base-100">
        <p class="text-lg text-gray-500">No new updates - your next adventure is waiting!</p>
      </div>
    {:else}
      <div class="space-y-4">
        {#each notifications as notification (notification.timestamp)}
          <div
            transition:fly={{ y: 20, duration: 300 }}
            class:opacity-50={notification.read}
            class="card bg-base-100 shadow-sm hover:shadow-md transition-shadow cursor-pointer group"
          >
            <div class="card-body p-4">
              <div class="flex items-start gap-4">
                {#if notification.type === 'alert'}
                  <div class="text-warning">
                    <UserIcon class="w-6 h-6" />
                  </div>
                {:else if notification.type === 'update'}
                  <div class="text-info">
                    <GlobeIcon class="w-6 h-6" />
                  </div>
                {:else if notification.type === 'friend'}
                  <div class="text-secondary">
                    <UserIcon class="w-6 h-6" />
                  </div>
                {:else}
                  <div class="text-success">
                    <CheckIcon class="w-6 h-6" />
                  </div>
                {/if}

                <div class="flex-1">
                  <p class="font-medium">{notification.message}</p>
                  <p class="text-sm text-gray-500">{notification.timestamp}</p>
                </div>

                {#if !notification.read}
                  <div class="w-2 h-2 bg-primary rounded-full self-center ml-4 animate-pulse" />
                {/if}
              </div>
            </div>
          </div>
        {/each}
      </div>
    {/if}
  </main>
</div>