<script>
    import { useResultsStore } from '@/stores/results.js'
    import Content from '@/components/Content.vue'
    import Header from '@/components/Header.vue'
    import TextFrame from '@/components/TextFrame.vue'
    import FeatureSearch from '@/components/icons/FeatureSearch.vue'

    export default {
        name: 'CompareQuestions',
        components: {
            Content,
            FeatureSearch,
            Header,
            TextFrame
        },
        setup() {
            const resultsStore = useResultsStore()

            return {
                resultsStore
            }
        },
        mounted() {
            if (this.resultsStore.compareCurrent !== null) {
                this.$router.push(`/results/answers/${this.resultsStore.compareCurrent}`)
            }
        }
    }
</script>
<template>
    <TextFrame>
        <Header>
            Compare Answers
        </Header>
        <Content>
            <article class="prose mx-auto">
                <p class="text-leader">
                    There are many turning points and forks in the road we will encounter along the way.
                    There is a little illustration of how your choices compared to other people&rsquo;s.
                </p>
                <div class="w-fit mx-auto">
                    <router-link active-class="active-link" class="navlink" to="/results/answers/0">
                        <div class="inline-flex px-3 py-1 space-x-2 rounded-md bg-olive-800 text-white transition-all duration-300 ease-in-out hover:bg-olive-600">
                            <span class="scale-75">
                                <FeatureSearch/>
                            </span>
                            <span class="uncial-antiqua">Take a Look</span>
                        </div>
                    </router-link>
                </div>
            </article>
        </Content>
    </TextFrame>
</template>