<template>
  <div class="chat-list">
    <div class="header">
      <router-link to="/profile" class="back-button">
        <span class="menu-icon">arrow_back</span>
      </router-link>
      <h1 class="title">Обсуждения</h1>
    </div>

    <div class="chats">
      <div class="chat-item" v-for="chat in chats" :key="chat.id">
        <div class="chat-avatar" v-if="!chat.image">
          {{ chat.initials }}
        </div>
        <img v-else :src="chat.image" class="chat-image" :alt="chat.title">
        <div class="chat-info">
          <h3 class="chat-title">{{ chat.title }}</h3>
          <p class="chat-message">
            <span class="message-author">Иван:</span>
            Смотрели уже последнюю серию? 
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChatList',
  data() {
    return {
      chats: [
        {
          id: 1,
          title: 'Игра престолов',
          initials: 'ИП',
          image: null
        },
        {
          id: 2,
          title: 'Стрела',
          image: 'path/to/arrow.jpg'
        },
        {
          id: 3,
          title: 'Джессика Джонс',
          image: 'path/to/jessica.jpg'
        },
        {
          id: 4,
          title: 'Леденящие душу приключения С...',
          initials: 'ЛД',
          image: null
        }
      ]
    }
  }
}
</script>

<style scoped>
.chat-list {
  min-height: 100vh;
  background-color: #000000;
  color: white;
}

.header {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #1F1F1F;
}

.back-button {
  color: #2196F3;
  text-decoration: none;
  margin-right: 32px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
}

.chats {
  padding: 0 20px;
}

.chat-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #1F1F1F;
}

.chat-avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background-color: #2196F3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 16px;
}

.chat-image {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  object-fit: cover;
  margin-right: 16px;
}

.chat-info {
  flex: 1;
}

.chat-title {
  font-size: 16px;
  margin: 0 0 4px;
}

.chat-message {
  font-size: 14px;
  color: #686868;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-author {
  color: #686868;
}

.menu-icon {
  font-family: 'Material Icons';
  font-size: 24px;
}
</style> 