<template>
  <q-icon class="Comment-Icon" :color="color" :name="icon" :size="size">
    <q-tooltip>Комментарий</q-tooltip>
    <q-popup-proxy transition-show="flip-up" transition-hide="flip-down">
      <div class="Comment-Body">
        {{ comment }}
      </div>
    </q-popup-proxy>
  </q-icon>
</template>

<style lang="scss">
div.q-menu {
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.4);
}
.Comment {
  &-Body {
    font-family: 'Golos Text', sans-serif;
    font-size: 12px;
    max-width: 500px;
    padding: 5px;
  }
}
</style>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({})
export default class Comment extends Vue {
  @Prop({
    type: String,
    default: 'pgs-message-dotted-off',
  })
  public readonly icon: string;

  @Prop({
    type: String,
    default: 'primary',
  })
  public readonly color: string;

  @Prop({
    type: String,
    default: '26px',
  })
  public readonly size: string;

  @Prop({
    type: String,
    default: '',
  })
  public readonly comment: string;
}
</script>
