<script setup>
const props = defineProps({
  replies: Array,
  activeModelColor: String,
  isInputCentered: Boolean,
});
const emit = defineEmits(['select']);
</script>

<template>
  <div class="quick-replies-container">
    <div
      v-for="(reply, index) in replies"
      :key="index"
      class="quick-reply-item"
    >
      <VBtn
        :variant="isInputCentered ? 'tonal' : 'outlined'"
        :color="activeModelColor"
        size="small"
        @click="emit('select', reply)"
        class="w-100"
      >
        {{ reply }}
      </VBtn>
    </div>
  </div>
</template>

<style scoped>
.quick-replies-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-gap: 8px;
  margin-bottom: 8px;
  width: 100%;
}

@media (max-width: 600px) {
  .quick-replies-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.quick-reply-item {
  width: 100%;
}
</style>
