<template>
  <div>
    <!-- Chat Messages Skeleton Loader -->
    <v-row no-gutters class="chat-content">
      <v-col
        v-for="(message, index) in chatSkeletons"
        :key="index"
        cols="12"
        class="d-flex my-2"
        :class="message.isRight ? 'justify-end' : 'justify-start'"
      >
        <v-skeleton-loader
          class="rounded-lg border"
          type="article"
          width="400"
          boilerplate
        ></v-skeleton-loader>
      </v-col>
    </v-row>

    <v-footer class="pa-0 chat-footer" color="background">
      <v-row align="center" justify="space-between" no-gutters class="">
        <v-col cols="9" class="pr-3">
          <v-skeleton-loader
            type="paragraph"
            height="100"
            class="rounded-lg border"
          ></v-skeleton-loader>
        </v-col>

        <v-col cols="3" class="d-flex justify-end">
          <v-skeleton-loader
            color="background"
            type="button"
            width="150"
            height="150"
            class="rounded-lg"
          ></v-skeleton-loader>
        </v-col>
      </v-row>
    </v-footer>
  </div>
</template>

<script setup>
import { ref } from "vue";

const chatSkeletons = ref([
  { isRight: false },
  { isRight: true },
  { isRight: false },
]);
</script>

<style scoped>
.chat-content {
  max-height: calc(100vh - (55px + 98px + 100px));
  overflow-y: auto;
}

.chat-footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  background-color: white;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
