<template>
  <div class="activity-card">
    <h4 class="activity-name">
      <span class="activity-icon">{{ activity.icon }}</span>
      {{ activity.name }}
    </h4>
    <ul class="activity-points">
      <li v-for="(point, i) in activity.points" :key="i" class="activity-point">
        {{ point }}
      </li>
    </ul>
  </div>
</template>

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

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

.activity-name {
  display: flex;
  align-items: center;
  gap: @space-sm;
  font-size: @font-size-md;
  font-weight: @font-weight-bold;
  color: @color-primary;
  margin: 0 0 @space-md;
}

.activity-icon {
  font-size: @font-size-lg;
}

.activity-points {
  display: flex;
  flex-direction: column;
  gap: @space-sm;
  padding: 0;
  margin: 0;
  list-style: none;
}

.activity-point {
  font-size: @font-size-sm;
  color: @color-text-secondary;
  line-height: @line-height-base;
  padding-left: @space-md;
  position: relative;

  &::before {
    content: '·';
    position: absolute;
    left: 0;
    color: @color-primary;
    font-weight: @font-weight-bold;
  }
}
</style>
