<template>
  <div class="q-mx-md q-mb-md">
    <div class="dashboard-section-title gradient-diarista q-mb-sm font16 fontbold">{{ $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_id % avatarColors.length]" size="46px" class="">
                <img v-if="item.provider_photo" :src="item.provider_photo" style="object-fit:cover;border-radius:50%;" />
                <span v-else>{{ item.provider_name?.slice(0,1).toUpperCase() ?? '—' }}</span>
              </q-avatar>
            </div>
            <div class="col-5 column q-gutter-y-xs q-my-auto">
              <span class="text-fav-name font12 fontmedium">{{ item.provider_name ?? 'Prestador' }}</span>
              <span class="text-fav-region font9 fontbold  text-grey-7">{{ item.provider_district ?? $t('dashboard_client.last_schedules.no_address') }}</span>
              <div v-if="item.average_rating != null" class="row items-center q-gutter-x-xs">
                <q-icon name="mdi-star" color="warning" size="xs" />
                <span class="text-fav-name font12 fontregular">{{ Number(item.average_rating).toFixed(1) }}</span>
              </div>
            </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')"
                @click="goToScheduling(item)"
              />
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script setup>
import { useQuasar } from 'quasar';
import SchedulingDialog from 'src/pages/search/components/SchedulingDialog.vue';

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

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

const goToScheduling = (provider) => {
  $q.dialog({
    component: SchedulingDialog,
    componentProps: { provider },
  });
};
</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>
