<template>
  <q-card :flat="false" bordered class="pending-request-card shadow-card">
    <div class="request-wrapper">
      <!-- informações -->
      <div class="request-info">
        <div class="request-title font12 fontmedium">
          {{ $t('dashboard_client.dashboard_pending_custom_schedules.pending_request_title') }}
        </div>

        <div class="request-time">
          <q-icon name="schedule" size="12px" />
          <span class="font8 fontregular">{{ $t('dashboard_client.dashboard_pending_custom_schedules.pending_request_time') }}</span>
        </div>
      </div>

      <!-- status -->
      <div class="request-status">
        <div class="column items-center">
          <div class="clock-badge">
            <q-icon name="mdi-clock-outline" size="15px" color="white" />
          </div>
          <span class="font10 fontregular badge-status-text text-primary q-mt-xs">
            {{ $t('dashboard_client.dashboard_pending_custom_schedules.waiting_status') }}
          </span>
        </div>
      </div>
    </div>

    <!-- barra -->
    <div class="progress-track">
      <div class="progress-fill" />
    </div>
  </q-card>
</template>

<script setup>
</script>

<style scoped lang="scss">
.pending-request-card {
  border-radius: 14px;
  padding: 12px;
  background: white;
  margin: 12px 16px;
}

.request-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.request-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.request-title {
  color: #4b4b4b;
  line-height: 1.2;
}

.request-time {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #999;
}

.request-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #9b5cff;
}

.progress-track {
  margin-top: 10px;
  height: 4px;
  border-radius: 999px;
  background: #ece6f8;
  overflow: hidden;
}

.progress-fill {
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, #ff72df, #8f5cff);
}

.clock-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>