<style lang="scss" src="./Banner.scss"></style>

<script lang="ts">
    // Components
    import Image from '$components/atoms/Image.svelte'

    let {
        title,
        image,
        back = false,
    }: {
        title: string
        image: any
        back?: boolean
    } = $props()
</script>

<section class="banner">
    <div class="banner__top container">
        {#if back}
            <a href="/" class="back" data-sveltekit-noscroll>
                <svg width="5" height="8" viewBox="0 0 5 8" fill="none">
                    <path d="M4 1 1 4l3 3" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>Back to Houses Of</span>
            </a>
        {/if}
    </div>

    <div class="banner__title">
        <h1 class="title-big-sans">{title}</h1>
    </div>

    <Image
        class="banner__background"
        id={image.id}
        alt={image.alt}
        sizeKey="hero"
        sizes={{
            large: { width: 1800, height: 1200 },
            medium: { width: 1200, height: 800 },
            small: { width: 700, height: 700 },
        }}
        lazy={false}
    />
</section>
