<template>
  <div class="activity-group">
    <div class="activity-group__pill">
      <SvgIcon :name="pillIcon" :size="'1.125rem'" class="activity-group__pill-icon" />
      <span class="activity-group__pill-label">{{ pillLabel }}</span>
    </div>

    <DashboardActivityCard
      :title="title"
      :meta="meta"
      :meta-icon="metaIcon"
      :thumb-icon="thumbIcon"
      :circle="circle"
      :avatar-url="avatarUrl"
    />
  </div>
</template>

<script setup>
import SvgIcon from '@/components/icons/SvgIcon.vue'
import DashboardActivityCard from '@/components/dashboard/DashboardActivityCard.vue'

defineProps({
  /** @type {import('vue').PropType<import('@/components/icons/icon-names').IconName>} */
  pillIcon: { type: String, default: 'shopping-bag' },
  pillLabel: { type: String, default: '' },
  title: { type: String, default: '' },
  meta: { type: Array, default: () => [] },
  metaIcon: { type: String, default: 'calendar' },
  thumbIcon: { type: String, default: 'play' },
  circle: { type: Boolean, default: false },
  avatarUrl: { type: String, default: '' },
})
</script>

<style lang="scss" scoped>
.activity-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  &__pill {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 58%);
    box-shadow: 0 6.75px 19.425px rgba(0, 0, 0, 4%);
    border-radius: 0.9375rem;
  }

  &__pill-icon {
    order: 2;
  }

  &__pill-label {
    order: 1;
    font-family: var(--font-family-fa);
    font-weight: 500;
    font-size: 1.125rem;
    color: #4b4b4b;
  }
}
</style>
