<template>
 <q-dialog ref="dialogRef" @hide="goBack">

  <q-card class="alert-card">

    <!-- ÍCONE -->
    <q-icon name="warning" size="36px" class="icon" />

    <!-- TEXTO -->
    <div class="text font14">
      {{ $t('provider.dashboard.opportunities_dialog.message') }}
    </div>

    <!-- BOTÃO -->
    <q-btn
      :label="$t('provider.dashboard.opportunities_dialog.close')"
      no-caps
      class="btn font14 fontsemibold"
      @click="goBack"
    />

  </q-card>

</q-dialog>
</template>
<script setup>
import { useDialogPluginComponent } from 'quasar'

defineEmits([...useDialogPluginComponent.emits])

const {
  dialogRef,
  onDialogOK
} = useDialogPluginComponent()

function goBack () {
  onDialogOK()
}
</script>
<style scoped>
.dialog-page {
  position: relative;
}

/* fundo escuro */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* card */
.alert-card {
  width: 85%;
  max-width: 320px;

  background: #fff;
  border-radius: 22px;

  padding: 24px 18px;
  text-align: center;

  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* ícone */
.icon {
  color: #7c5cff;
  margin-bottom: 16px;
}

/* texto */
.text {
  color: #666;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* botão */
.btn {
  width: 100%;
  height: 44px;
  border-radius: 24px;
  background: linear-gradient(90deg, #7c5cff, #9f7aea);
  color: white;
}
</style>