<template>

  <div class="dev-card flex border-1 rounded p-2 border-gray-300 gap-3" tabindex="0" @click="$emit('qr', dev.link)">
    <img v-if="dev.picture" :src="dev.picture" alt="picture" class="w-14 rounded-full" />
    <Icon v-else icon="fluent:person-circle-24-filled" class="w-14 h-14"/>
    <div class="flex flex-col gap-1">
      <span>{{ dev.name }}</span>
      <span>{{ dev.role }}</span>
    </div>
  </div>

</template>

<script setup lang="ts">
  import { Icon } from "@iconify/vue";
  import { models } from "../../wailsjs/go/models";
  import Developer = models.Developer;

  defineProps<{
    dev: Developer,
  }>();

  defineEmits(['qr']);
</script>

<style scoped>

</style>