<template>
  <div class="q-mx-md q-mb-md">
    <div class="dashboard-section-title gradient-diarista q-mb-sm">{{ $t('dashboard_client.favorites.title') }}</div>

    <div class="scroll-track">
      <q-card
        v-for="item in data"
        :key="item.provider_id"
        class="fav-card shadow-card bg-surface card-border"
        :flat="false"
      >
        <q-card-section class="q-pa-sm column text-text">
          <div class="row items-start no-wrap">
            <div class="col-3 q-my-auto">
              <q-avatar :style="avatarColors[item.provider_provider_id % avatarColors.length]" size="46px" class="text-weight-bold">
                {{ item.provider_name?.slice(0,1).toUpperCase() ?? '—' }}
              </q-avatar>
            </div>
            <div class="col-5 column q-gutter-y-xs q-my-auto">
              <span class="text-fav-name">{{ item.provider_name ?? 'Prestador' }}</span>
              <span class="text-fav-region">{{ item.provider_district ?? 'N/A' }}</span>
              <div v-if="item.average_rating != null" class="row items-center q-gutter-x-xs">
                <q-icon name="mdi-star" color="warning" size="sm" />
                <span class="text-fav-name">{{ Number(item.average_rating).toFixed(1) }}</span>
              </div>
              <!-- <span class="text-fav-price">{{ bestPrice(item) }}</span> -->
            </div>
            <div class="col-4 column q-mt-auto">
              <q-btn
                rounded color="primary"
                padding="1px 5px"
                size="sm"
                :label="$t('dashboard_client.favorites.view_schedule')"
              />
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

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

import { formatCurrency } from 'src/helpers/utils';
import { useI18n } from 'vue-i18n';

defineProps({ data: { type: Array, default: () => [] } });

// const { t } = useI18n();

const { t } = useI18n();

const avatarColors = [
  { background: '#ffd5df', color: '#932e57' },
  { background: '#d7e8ff', color: '#2158a8' },
  { background: '#dfd',    color: '#2a7a3b' },
  { background: '#ffe5cc', color: '#8a4500' },
];

// const bestPrice = (item) => {
//   const prices = [
//     item.daily_price_2h,
//     item.daily_price_4h,
//     item.daily_price_6h,
//     item.daily_price_8h,
//   ].filter(p => p != null && Number(p) > 0);

//   if (!prices.length) return t('dashboard_client.favorites.no_price');
//   const min = Math.min(...prices.map(Number));
//   return t('dashboard_client.favorites.from') + ' ' + formatCurrency(min);
// };

const bestPrice = (item) => {
  const prices = [
    item.daily_price_2h,
    item.daily_price_4h,
    item.daily_price_6h,
    item.daily_price_8h,
  ].filter(p => p != null && Number(p) > 0);

  if (!prices.length) return t('dashboard_client.favorites.no_price');
  const min = Math.min(...prices.map(Number));
  return t('dashboard_client.favorites.from') + ' ' + formatCurrency(min);
};
</script>

<style scoped lang="scss">
.scroll-track {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  &::-webkit-scrollbar { display: none; }
  &::after { content: ''; flex: 0 0 1px; }
}
.fav-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
  min-width: 70%;
}
</style>
