<template>
    <Fragment>
        <div class="wcc-scanner-container-template">
            <div class="wcc-scanner-inner-container">
                <div class="wcc-scanner-image-container">
                    <base-icon icon="scanner" color="#000000"></base-icon>
                </div>
                <div class="wcc-scanner-connect-btn">
                    <base-button
                        class="wcc-button wcc-button-blue"
                        ref="ckyButtonScannerConnect"
                        @click.native="emitScannerConnect"
                        style="margin-left: 15px"
                        :data-test-id="`wcc-scan-for-cookies-button`"
                    >
                        <base-icon icon="search" color="#000000"></base-icon>
                        <span class="wcc-scanner-connect-btn-label">
                            {{ $i18n.__("Scan for cookies", "webtoffee-cookie-consent") }}
                        </span>
                    </base-button>
                </div>
            </div>
        </div>
    </Fragment>
</template>

<script>
import BaseIcon from "@/components/icons/BaseIcon.vue";
import { Fragment } from "vue-frag";
export default {
	name: "InitialScanner",
	components: {
		BaseIcon,
        Fragment
	},
	data() {
		return {
		};
	},
    computed: {
    },
    methods: {
        emitScannerConnect() {
            // Emit a custom event named 'scanner-connect-clicked'
            this.$root.$emit('scanner-connect-clicked');
        },
    },
};
</script>

<style lang="scss">
.wcc-scanner-image-container,.wcc-scanner-connect-btn{
    display: flex;
    justify-content: center;
    align-items: center;
}
.wcc-scanner-connect-btn .wcc-icon-base{
    vertical-align: bottom;
}
.wcc-scan-result{
    margin-top: 16px;
}
</style>