<template>
  <div class="block-news-side-actions-container no-print">
    <PrintUi />

    <ShareContent :title="title" :url="url" />

    <BookmarkUi
      v-if="reactions"
      :herited-data="{
        type: 'bookmark',
        related_uuid: uuid,
        related_type: contentType,
        reactions: reactions
      }"
    />
  </div>
</template>

<script>
import PrintUi from '@inside-ui/PrintUi'
import BookmarkUi from '@inside-ui/BookmarkUi'

import ShareContent from './sub-components/ShareContent'

export default {
  name: 'BlockPPSideActions',
  components: {
    PrintUi,
    BookmarkUi,
    ShareContent
  },
  props: {
    title: {
      type: String
    },
    url: {
      type: String
    },
    uuid: {
      type: String
    },
    contentType: {
      type: String
    },
    reactions: {
      type: Object
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.block-news-side-actions-container {
  position: absolute;
  top: var(--spacing-s);
  right: calc(var(--spacing-l) * (-1));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-s);

  @include tablet {
    position: initial;
    flex-direction: row;
    justify-content: center;
    margin-top: var(--spacing-m);
    gap: var(--spacing-m);
  }

  i {
    color: var(--color-grey);
    font-size: var(--font-size-h4);
    @include transition(color 0.3s);

    &:hover {
      color: var(--color-secondary);
    }
  }

  .bookmark-ui .ds-icon-container {
    @include transition(fill 0.3s);

    &:hover {
      fill: var(--color-secondary);
    }
  }
}
</style>
