<template>
  <v-dialog v-model="model" max-width="600" persistent>
    <v-card
      class="px-3 d-flex flex-column"
      :class="`${theme.name.value === 'light' ? 'bg-white' : ''} ${
        mdAndUp ? 'rounded-xl' : ''
      }`"
      :style="{ border: 'none', boxShadow: 'none' }"
    >
      <v-toolbar
        :color="theme.name.value === 'dark' ? 'grey-darken-4' : 'white'"
        class="flex-shrink-0 mb-3"
        style="position: sticky; top: 0; z-index: 10"
      >
        <slot name="title">
          <span class="text-h6 font-weight-medium pt-1 text-capitalize">
            Dialog
          </span>
        </slot>
        <v-spacer />
        <v-btn icon="mdi-close" @click="closeDialog" />
      </v-toolbar>

      <v-sheet class="flex-grow-1 overflow-y-auto px-3">
        <slot />
      </v-sheet>

      <v-sheet class="flex-shrink-0 px-3 py-2">
        <slot name="footer" />
      </v-sheet>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { useTheme, useDisplay } from "vuetify";

const theme = useTheme().global;
const { mdAndUp } = useDisplay();

const props = defineProps<{
  modelValue: boolean;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
  (e: "close"): void;
}>();

const model = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});

function closeDialog() {
  model.value = false;
  emit("close");
}
</script>

<style scoped>
:deep(.v-dialog .v-overlay__content) {
  margin: auto;
}
</style>
