<template>
  <div
    class="comment"
    data-cy="comment">
    <div class="comment__owner">
      <user-widget :avatar-url="comment.owner.avatarUrl"/>
      <span class="comment__owner-name">{{ comment.owner.firstName }} {{ comment.owner.lastName }}</span>
    </div>
    <div class="comment__date">
      {{ comment.created | datetime }}
    </div>
    <div class="comment__text">
      {{ comment.text }}
    </div>
  </div>
</template>

<script>
  import UserWidget from '@/components/UserWidget';

  export default {
    props: {
      comment: {
        type: Object,
        default: null,
      },
    },
    components: {UserWidget},
  };
</script>

<style scoped lang="scss">
  @import '~styles/helpers';

  .comment {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 2rem auto;
    grid-template-areas:
      "o d"
      "t t";
    padding: $medium-spacing 0 $large-spacing 0;
    border-bottom: 1px solid $color-silver;
    grid-row-gap: $medium-spacing;

    &__owner {
      grid-area: o;
      display: flex;
      align-items: center;
    }

    &__date {
      grid-area: d;
      justify-self: end;
      align-self: center;
      @include regular-text;
    }

    &__text {
      grid-area: t;
      @include regular-paragraph;
    }
  }
</style>
