<script>
  import { onMount, onDestroy } from 'svelte'
  import { writable } from 'svelte/store'
  
  let count = 0
  let user = { name: 'John Doe', email: 'john@example.com' }
  let isOnline = false
  
  const onlineUsers = writable([])
  
  function increment() {
    count += 1
  }
  
  function toggleOnline() {
    isOnline = !isOnline
  }
  
  onMount(() => {
    console.log('Profile component mounted')
    // Simulate checking online status
    setTimeout(() => isOnline = true, 1000)
  })
  
  onDestroy(() => {
    console.log('Profile component destroyed')
  })
</script>

<div class="container">
  <header class="profile-header">
    <h1>User Profile</h1>
    <div class="status" class:online={isOnline}>
      {isOnline ? 'Online' : 'Offline'}
    </div>
  </header>
  
  <div class="profile-info">
    <h2>{user.name}</h2>
    <p>{user.email}</p>
  </div>
  
  <div class="actions">
    <button on:click={increment} class="btn">
      Count: {count}
    </button>
    <button on:click={toggleOnline} class="btn secondary">
      {isOnline ? 'Go Offline' : 'Go Online'}
    </button>
  </div>
</div>

<style>
  .container {
    padding: 2rem;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .status {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: #ef4444;
    color: white;
    font-size: 0.875rem;
  }
  
  .status.online {
    background: #10b981;
  }
  
  .profile-info {
    margin-bottom: 1.5rem;
  }
  
  .actions {
    display: flex;
    gap: 0.5rem;
  }
  
  .btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.25rem;
    background: #3b82f6;
    color: white;
    cursor: pointer;
  }
  
  .btn.secondary {
    background: #6b7280;
  }
</style>