<template>
    <div :class="$style['l-container--relative']">
        <page-banner
            :src-set-wide="`${getHeroImage}bg-hero-wide.jpg`"
            :src-set-mid="`${getHeroImage}bg-hero-mid.jpg`"
            :src-set-narrow="`${getHeroImage}bg-hero-narrow.jpg`" />

        <search-box
            :locale="locale"
            :copy-override="{
                headlineTitle: copy.statusBannerContent.searchboxHeading,
                headlineSubtitle: copy.statusBannerContent.searchboxSubHeading
            }"
            data-test-id="banner-search-box"
            :class="$style['c-search-wrapper']" />
    </div>
</template>

<script>
import SearchBox from '@justeat/f-searchbox';
import PageBanner from './PageBanner.vue';

export default {
    components: {
        SearchBox,
        PageBanner
    },

    props: {
        locale: {
            type: String,
            default: ''
        },

        copy: {
            type: Object,
            default: () => {}
        },

        baseHeroUrl: {
            type: String,
            default: ''
        }
    },

    computed: {
        getHeroImage () {
            const localeToLowercase = this.locale.toLowerCase();

            return `${this.baseHeroUrl}${localeToLowercase}/`;
        }
    }
};
</script>

<style lang="scss" module>
@use '@justeat/fozzie/src/scss/fozzie' as f;

@include f.media-context(('narrow-mid': 620px)) {
    .l-container--relative {
        position: relative;
        padding-bottom: 195px;
        margin-bottom: 20px;

        @include f.media('>=tiny') {
            padding-bottom: 185px;
        }

        @include f.media('>=narrow') {
            padding-bottom: 160px;
        }

        @include f.media('>=mid') {
            padding-bottom: 50px;
        }
    }

    .c-search-wrapper {
        position: absolute;
        bottom: 0;
        right: 50%;
        transform: translate(50%, 0);
        z-index: 1;
    }
}
</style>
