<template>
  <div class="clothing-card" :class="{ 'clothing-card--highlight': month.highlight }">
    <div class="clothing-header">
      <h4 class="clothing-month">{{ month.name }}</h4>
      <span v-if="month.highlight" class="clothing-tag">大多数家庭选这个月</span>
    </div>
    <p class="clothing-desc">{{ month.desc }}</p>
    <div class="clothing-temps">
      <span class="temp-badge"><strong>白天</strong> {{ month.tempDay }}</span>
      <span class="temp-badge"><strong>夜间</strong> {{ month.tempNight }}</span>
    </div>
    <div class="clothing-wear">
      <p class="wear-line"><span class="wear-label">大人</span>{{ month.adultWear }}</p>
      <p class="wear-line"><span class="wear-label">小朋友</span>{{ month.kidsWear }}</p>
    </div>
    <p v-if="month.note" class="clothing-note">{{ month.note }}</p>
  </div>
</template>

<script setup>
defineProps({
  month: { type: Object, required: true },
})
</script>

<style lang="less" scoped>
.clothing-card {
  background: @color-bg-white;
  border: 1px solid @color-border;
  border-radius: @border-radius-md;
  padding: @space-lg;

  &--highlight {
    border-color: @color-primary-lighter;
    box-shadow: 0 2px 12px rgba(45, 106, 79, 0.08);
  }
}

.clothing-header {
  display: flex;
  align-items: center;
  gap: @space-sm;
  margin-bottom: @space-xs;
}

.clothing-month {
  font-size: @font-size-base;
  font-weight: @font-weight-bold;
  color: @color-primary;
  margin: 0;
}

.clothing-tag {
  font-size: @font-size-xs;
  color: @color-accent;
  font-weight: @font-weight-medium;
}

.clothing-desc {
  font-size: @font-size-sm;
  color: @color-text-muted;
  margin-bottom: @space-sm;
}

.clothing-temps {
  display: flex;
  gap: @space-lg;
  margin-bottom: @space-md;
  font-size: @font-size-sm;
  color: @color-text-secondary;

  strong {
    color: @color-primary;
  }
}

.clothing-wear {
  display: flex;
  flex-direction: column;
  gap: @space-xs;
}

.wear-line {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: @line-height-base;
  margin: 0;
}

.wear-label {
  display: inline-block;
  font-weight: @font-weight-medium;
  color: @color-primary;
  margin-right: @space-sm;
  min-width: 48px;
}

.clothing-note {
  margin-top: @space-md;
  padding: @space-sm @space-md;
  background: @color-bg-warm;
  border-radius: @border-radius-sm;
  font-size: @font-size-sm;
  color: @color-accent;
  line-height: @line-height-base;
}
</style>
