<template>
  <div class="q-mx-md q-mb-md">
    <q-card class="price-suggest-card bg-surface shadow-card card-border" :flat="false">
      <q-card-section class="q-pa-md">
        <div class="row items-center justify-between q-mb-sm">
          <div class="row items-center q-gutter-x-sm">
            <span class="text-suggest-label">{{ $t('provider.dashboard.price_suggest.region_label_1') }}</span>
            <span class="text-suggest-label text-weight-bold">{{ $t('provider.dashboard.price_suggest.region_label_2') }}</span>
          </div>
          <q-badge rounded class="price-badge q-px-md q-py-xs gradient-diarista-bg">
            {{ formatCurrency(data?.average_price ?? 0) }}
          </q-badge>
        </div>
        <div class="row items-center justify-between no-wrap">
          <div class="row items-center q-gutter-x-sm">
            <span class="text-suggest-label">{{ $t('provider.dashboard.price_suggest.my_price_label') }}</span>
            <q-chip class="row items-center no-wrap bg-surface" outline color="text">
              <span class="text-my-price q-mr-xs">{{ showMyPrice ? formatCurrency(data?.your_price ?? 0) : $t('common.price_masked') }}</span>
              <q-btn icon="mdi-eye-off-outline" flat size="xs" color="grey-6" class="q-pa-none q-pl-sm" @click="showMyPrice = !showMyPrice"/>
            </q-chip>
          </div>
          <q-btn flat no-caps color="primary" padding="0" class="btn-alter">
            <div class="row items-center q-gutter-x-xs">
              <span class="text-weight-bold">{{ $t('common.alter') }}</span>
              <q-icon name="mdi-pencil-outline" size="xs" />
            </div>
          </q-btn>
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script setup>
import { formatCurrency } from 'src/helpers/utils';
import { ref } from 'vue';

const showMyPrice = ref(false);

defineProps({
  data: {
    type: Object,
    default: () => ({
    })
  }
});

</script>

<style scoped lang="scss">
.price-suggest-card {
  border-radius: 12px;
}
.text-suggest-label {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  color: #3a3a4a;
}
.price-badge {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  border-radius: 20px;
}
.text-my-price {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #3a3a4a;
}
.btn-alter {
  font-size: 11px;
}
</style>
