<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
          color="grey-6"
          dense
          flat
          icon="mdi-close"
          round
          @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";

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

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

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