<template>
    <Fragment>
        <div class="wcc-scanner-container-template">
            <div class="wcc-scanner-inner-container">
                <div class="wcc-scanner-image-container wcc-center">
                    <base-icon icon="localhost" color="#000000"></base-icon>
                </div>
                <div class="wcc-scan-warning-main wcc-center">
                    <div class="wcc-scan-notice-warning-div wcc-center">
                        <base-icon icon="exclamation-circle" color="#000000"></base-icon>
                        <span class="wcc-scan-warning-label" v-html="warningLabel">
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </Fragment>
</template>

<script>
import BaseIcon from "@/components/icons/BaseIcon.vue";
import { Fragment } from "vue-frag";

export default {
    name: "ScanNotice",
    components: {
        BaseIcon,
        Fragment
    },
    props: {
        warningLabel: {
            type: String,
            required: true
        }
    },
    data() {
        return {};
    },
    computed: {},
    methods: {}
};
</script>

<style lang="scss">

.wcc-scan-notice-warning-div {
    width: 363px;
    height: auto;
    padding: 16px 19px;
    background-color: #FBEBEB;
    border-radius: 10px;
}

.wcc-scan-warning-label {
    color: #D63638;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.wcc-scan-notice-warning-div .wcc-icon-base {
    margin-right: 6px;
}
</style>