<script setup lang="ts">
import Dialog from 'primevue/dialog';
import Button from 'primevue/button';

const props = withDefaults(
  defineProps<{
    visible: boolean;
    title: string;
    width?: string;
    loading?: boolean;
    submitLabel?: string;
    cancelLabel?: string;
  }>(),
  {
    width: '540px',
    loading: false,
    submitLabel: '저장',
    cancelLabel: '취소',
  },
);

const emit = defineEmits<{
  'update:visible': [value: boolean];
  submit: [];
}>();

function close() {
  emit('update:visible', false);
}
</script>

<template>
  <Dialog
    :visible="visible"
    :header="title"
    :style="{ width: width, maxWidth: '95vw' }"
    modal
    :closable="!loading"
    :draggable="false"
    @update:visible="emit('update:visible', $event)"
  >
    <div class="form-dialog__body">
      <slot />
    </div>

    <template #footer>
      <div class="form-dialog__footer">
        <Button
          :label="cancelLabel"
          severity="secondary"
          text
          :disabled="loading"
          @click="close"
        />
        <Button
          :label="submitLabel"
          :loading="loading"
          @click="emit('submit')"
        />
      </div>
    </template>
  </Dialog>
</template>

<style lang="scss" scoped>
@use '@/assets/styles/variables' as *;

.form-dialog {
  &__body {
    display: flex;
    flex-direction: column;
    gap: $space-md;
  }

  &__footer {
    display: flex;
    justify-content: flex-end;
    gap: $space-sm;
  }
}
</style>
