<script setup lang="ts"></script>

<template>
  <div class="d-flex mb-4 ga-2">
    <v-avatar size="36" class="" color="blue-lighten-4">
      <span class="text-blue-darken-2">А</span>
    </v-avatar>
    <div class="message-wrapper">
      <div class="d-flex align-center ga-2">
        <span class="text-subtitle-2 font-weight-medium">Анна</span>
        <span class="text-caption text-disabled">10:30</span>
      </div>
      <v-card class="pa-4" rounded="lg" flat>
        <span>Привет! Как дела? Что нового?</span>
      </v-card>
    </div>
  </div>

  <div class="d-flex mb-4 ga-2">
    <v-avatar size="36" color="deep-purple-lighten-4">
      <span class="text-deep-purple-darken-2">М</span>
    </v-avatar>
    <div class="message-wrapper">
      <div class="d-flex align-center ga-2">
        <span class="text-subtitle-2 font-weight-medium">Максим</span>
        <span class="text-caption text-disabled">10:30</span>
      </div>
      <v-card class="pa-4" rounded="lg" flat>
        <span>
          Всем привет! Смотрели новый фильм? Там такие спецэффекты, просто космос! Очень советую
          сходить в кино.
        </span>
      </v-card>
    </div>
  </div>

  <div class="d-flex mb-4 ga-2 flex-row-reverse">
    <v-avatar size="36" color="primary">
      <span class="text-white">Я</span>
    </v-avatar>
    <div style="align-items: flex-end">
      <div class="d-flex align-center flex-row-reverse ga-2">
        <span class="text-caption text-disabled">10:35</span>
        <span class="text-subtitle-2 font-weight-medium">Вы</span>
      </div>
      <v-card class="pa-4" rounded="lg" flat color="primary">
        <span class="text-white"
          >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
          has been the industry's standard dummy text ever since the 1500s, when an unknown printer
          took a galley of type and scrambled it to make a type specimen book.</span
        >
      </v-card>
    </div>
  </div>

  <div class="d-flex mb-4 ga-2">
    <v-avatar size="36" color="orange-lighten-4">
      <span class="text-orange-darken-2">К</span>
    </v-avatar>
    <div class="message-wrapper">
      <div class="d-flex align-center ga-2">
        <span class="text-subtitle-2 font-weight-medium">Катя</span>
        <span class="text-caption text-disabled">10:40</span>
      </div>
      <v-card class="message-bubble friend-message pa-4" rounded="lg" flat>
        <span>Смотрите какой милый котик</span>
        <v-img
          src="https://cdn.vuetifyjs.com/images/cards/kitchen.png"
          max-width="200"
          class="mt-2 rounded"
        ></v-img>
      </v-card>
    </div>
  </div>
</template>

<style scoped></style>
