<script setup lang="ts">
import { ref } from 'vue';
import VueQrcode from '@chenfengyuan/vue-qrcode';

interface QROptions {
  width?: number;
  margin?: number;
  color?: {
    dark: string;
    light: string;
  };
}
const qrOptions = ref<QROptions>({
  width: 200,
  margin: 1,
  color: {
    dark: '#303030',
    light: 'f0f0f0'
  }
});

interface Props {
  qrurl: string
  team: string
}
const props = withDefaults(defineProps<Props>(), {})

</script>

<template>
  <div>
    <div class="qr">
      <div>
        {{ team }}
      </div>
      <VueQrcode :value="props.qrurl" :options="qrOptions" tag="svg" class="qr-code" />
      <div>
        Пора решать загадку
      </div>
    </div>
  </div>
</template>

<style scoped>
.qr {
  text-align: center;
  width: 200px;
}
</style>
