<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="card-border bg-surface text-text" style="width: min(88vw, 360px);">

      <q-card-section class="row items-center q-pb-none">
        <div class="font16 fontbold text-text">{{ serviceType.label }}</div>
        <q-space />
        <q-btn flat round dense icon="mdi-close" color="grey-6" @click="onDialogCancel" />
      </q-card-section>

      <q-card-section class="font14 fontmedium text-grey-7 q-pt-xs">
        {{ serviceType.hours }}
      </q-card-section>

      <q-separator />

      <q-card-section class="font12 fontmedium text-text">
        {{ serviceType.description }}
      </q-card-section>

    </q-card>
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from 'quasar';

defineProps({
  serviceType: {
    type: Object,
    required: true,
  },
});

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
</script>
