<template>
  <div class="activity-entry">
    <div class="activity-entry__content">
      <h3 class="activity-entry__title">{{ title }}</h3>
      <slot/>
    </div>

    <div
      class="activity-entry__link"
      @click="$emit('link')">
      <chevron-right class="activity-entry__icon"/>
    </div>
  </div>
</template>

<script>
  import ChevronRight from '@/components/icons/ChevronRight';

  export default {
    props: ['title'],

    components: {
      ChevronRight
    }
  };
</script>

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

  .activity-entry {
    padding: $small-spacing 0;
    border-bottom: 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-content: center;
      cursor: pointer;
    }

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

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