<template>
  <div class='container'>
    <router-link class='inner' :to='"/users/"+userId'>
      <img class='icon' v-bind:src='icon' />
      <div>
        <div class='name'>{{name}}</div>
        <div class='login'>{{login}}</div>
      </div>
    </router-link>
  </div>
</template>
<style lang='scss' scoped>
  .inner {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-gap: 16px;
    align-items: center;
    .icon{
      width: 64px;
      height: 64px;
      border-radius: 32px;
      object-fit: cover;
    }
    .name {
      font-size: 1.1rem;
      font-weight: bold;
      margin-bottom: 4px;
    }
    .login{
      font-size: 0.9rem;
    }
  }
</style>
<script>
export default {
  props: ['userId', 'icon', 'name', 'login'], 
  data() {
    return {
      modal: false
    }
  },
  methods: {
    closeModal() {
      this.modal = false;
    },
    openModal() {
      this.modal = true;
    },
  },
}
</script>
