<template>
  <div class="schedule-notice">
    <div class="schedule-notice__head">
      <q-icon name="mdi-information-outline" size="18px" color="violet-normal" />
      <span>{{ text || $t("agendamento.aviso_horarios") }}</span>
    </div>

    <q-btn
      v-if="whatsappUrl"
      unelevated
      dense
      no-caps
      color="positive"
      icon="mdi-whatsapp"
      size="sm"
      class="schedule-notice__btn"
      :label="$t('agendamento.falar_whatsapp')"
      @click="openUrl(whatsappUrl)"
    />
  </div>
</template>

<script setup>
import { computed } from "vue";
import { whatsappUrlFor } from "src/helpers/utils";
import { openUrl } from "src/helpers/links";

const { partner, text, whatsappMessage } = defineProps({
  partner: {
    type: Object,
    default: null,
  },
  text: {
    type: String,
    default: null,
  },
  whatsappMessage: {
    type: String,
    default: null,
  },
});

const whatsappUrl = computed(() => whatsappUrlFor(partner, whatsappMessage));
</script>

<style scoped lang="scss">
@use "src/css/quasar.variables.scss" as vars;

.schedule-notice {
  background: vars.$violet-light;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  &__head {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: vars.$color-text;
  }

  &__btn {
    align-self: flex-start;
    border-radius: 8px;
  }
}
</style>
