<template>
  <router-link
    v-bind="$attrs"
    :to="to"
    class="activity-entry"
  >
    <div class="activity-entry__content">
      <slot />
    </div>

    <div class="activity-entry__link">
      <chevron-right class="activity-entry__icon" />
    </div>
  </router-link>
</template>

<script setup lang="ts">
import ChevronRight from '@/components/icons/ChevronRight.vue';
import { RouterLink } from 'vue-router';

// todo: define a better type
interface Props {
  to: any;
}
defineProps<Props>();
</script>

<style scoped lang="scss">
@import '@/styles/_variables.scss';
@import '@/styles/_mixins.scss';

.activity-entry {
  padding: $small-spacing 0;
  border-top: 1px solid $color-silver;
  display: flex;
  justify-content: space-between;

  &__title {
    @include small-text;
    // todo: make style definition for small text and silver color
    color: $color-silver-dark;
    margin-bottom: 0;
  }

  &__content {
    flex-grow: 1;
    @include regular-text;
    line-height: $default-line-height;
  }
  &__link {
    display: flex;
    flex-grow: 0;
    align-items: flex-start;
    cursor: pointer;
  }

  &__icon {
    fill: $color-brand;
    width: 30px;
  }

  :deep(p) {
    @include regular-text;
  }
}
</style>
