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

    <div class="scroll-track">
      <q-card
        v-for="item in data"
        :key="item.id"
        class="mini-card shadow-card bg-surface card-border"
        :flat="false"
      >
        <q-card-section class="column q-pa-md q-gutter-y-xs text-text">
          <q-avatar :style="avatarColors[item.provider_id % avatarColors.length]" size="56px" class="q-mx-auto">
            <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>
          <span class="text-done-name font12 fontmedium">{{ item.provider_name ?? 'Prestador' }}</span>
          <span class="text-done-district font9 fontbold text-grey-7">{{ item.provider_district != null ? item.provider_district : $t('dashboard_client.last_schedules.no_address') }}</span>
          <q-btn
            rounded color="secondary"
            padding="1px 5px" size="sm"
            class="q-mt-xs full-width"
            :label="$t('dashboard_client.last_schedules.reschedule')"
            @click="goToScheduling(item)"
          />
        </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: 10px;
  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; }
}
.mini-card {
  flex: 0 0 130px;
  scroll-snap-align: start;
}
.text-done-district {
  text-align: center;
}
</style>
