<template>
  <q-item
    @click="showDialog = true"
    clickable
    v-ripple
    >
    <q-item-section avatar>
      <q-avatar 
        rounded 
        text-color="white" 
        :icon 
        :color="iconColor"
        size="lg"
      />
    </q-item-section>
    <q-item-section>
      <q-item-label class="text-bold">
        {{ $t(title) }}
      </q-item-label>
      <q-item-label caption>
        <slot name="value"/>
      </q-item-label>
    </q-item-section>
    <q-item-section side>
      <q-icon name="mdi-chevron-right" color="grey"/>
    </q-item-section>
  </q-item>

  <pn-bottom-sheet-dialog
    :title
    :caption
    v-model="showDialog"
    >
    <div class="q-px-md">
      <slot/>
    </div>
  </pn-bottom-sheet-dialog>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  defineProps<{
    title: string
    caption?: string 
    icon: string
    iconColor: string
  }>()

  const showDialog=ref<boolean>(false)
</script>

<style scoped>
</style>
