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

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

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

.qr-code {
  margin: 12px 0;
  box-shadow: 0px 3px 15px rgb(98, 98, 98);
}

.team-name {
  margin: 10px 0;
  font-size: 20px;
}

.message {
  margin: 7px 0;
}
</style>
