<template>
  <slide-template>
    <div ref="container" class="w100 flex no-wrap q-pt-lg">
      <q-resize-observer @resize="updateWidth" />
      <div class="w100 flex justify-center" v-if="containerWidth > 800">
        <q-card
          v-for="(item, idx) in problems" 
          :key="idx"
          class="q-pa-md q-ma-sm"
          >
          <problem-section-item
            :icon="item.icon"
            :title="item.title"
            :description="item.description"
            style="overflow: hidden;"
            :style="{ width: cardWidth + 'px' }"
          />
        </q-card>
      </div>

      <q-carousel
        v-else
        v-model="slide"
        transition-prev="scale"
        transition-next="scale"
        swipeable
        animated
        navigation
        padding
        height="300px"
        control-color="primary"
        class="w100"
        >
        <q-carousel-slide
          v-for="(item, idx) in problems" 
          :key="idx"
          :name="item.title"
          class="flex justify-center q-pa-none q-ma-none"
          >
          <problem-section-item
            :icon="item.icon"
            :title="item.title"
            :description="item.description"
            style="overflow: hidden; min-width: 100px; max-width: 200px;"
          />
        </q-carousel-slide>
      </q-carousel>
    </div>
  </slide-template>

</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import ProblemSectionItem from 'components/ProblemSectionItem.vue'
  import SlideTemplate from 'components/SlideTemplate.vue'
  
  const problems = [
    { id: 1, icon: 'mdi-account-group-outline', title: 'problem__address_book', description: 'problem__address_book_description' },
    { id: 2, icon: 'mdi-clipboard-outline', title: 'problem__tasks', description: 'problem__tasks_description' },
    { id: 3, icon: 'mdi-calendar-month', title: 'problem__meeting', description: 'problem__meeting_description' },
    { id: 4, icon: 'mdi-folder-open-outline', title: 'problem__files', description: 'problem__files_description' },
    { id: 5, icon: 'mdi-lock-outline', title: 'problem__privacy', description: 'problem__privacy_description' }
  ]

  const containerWidth = ref(0)
  const cardWidth = ref(175)

  const updateWidth = ({ width }) => {
    containerWidth.value = width
    cardWidth.value = width < 1200 ? 250 : 175
  }

  const slide = ref(problems[0].title)
  
</script>

<style scoped>
</style>
