<template>
  <view class="training-stats">
    <view class="training-stats__item">
      <text class="training-stats__value">{{ stats?.monthBookings ?? 0 }}</text>
      <text class="training-stats__unit">次</text>
      <text class="training-stats__label">本月训练</text>
    </view>

    <view class="training-stats__divider" />

    <view class="training-stats__item">
      <text class="training-stats__value">{{ stats?.monthDays ?? 0 }}</text>
      <text class="training-stats__unit">天</text>
      <text class="training-stats__label">训练天数</text>
    </view>

    <view class="training-stats__divider" />

    <view class="training-stats__item">
      <text class="training-stats__value">{{ stats?.monthHours ?? 0 }}</text>
      <text class="training-stats__unit">小时</text>
      <text class="training-stats__label">训练时长</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { UserStatsResponse } from '@mp-pilates/shared'

defineProps<{
  stats: UserStatsResponse | null
}>()
</script>

<style lang="scss" scoped>
.training-stats {
  display: flex;
  align-items: stretch;
  background: $bg-card;
  border-radius: $radius-lg;
  margin: 0 $spacing-lg;
  padding: $spacing-md 0;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

  // Pull card up to overlap the dark header
  margin-top: -$spacing-xl;
  position: relative;
  z-index: 1;

  &__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: $spacing-sm 0;
  }

  &__divider {
    width: 1rpx;
    background: $border-color;
    margin: $spacing-xs 0;
  }

  &__value {
    font-size: 48rpx;
    font-weight: 700;
    color: $brand-color;
    line-height: 1;
  }

  &__unit {
    font-size: 22rpx;
    color: $text-secondary;
    margin-top: 4rpx;
  }

  &__label {
    font-size: 24rpx;
    color: $text-hint;
    margin-top: $spacing-xs;
  }
}
</style>
