<script lang="ts">
    import SeparatorLine from "./separator-line.svelte";

    let {
        title,
        subtitle = "",
        banner = "",
    }: {
        title: string;
        subtitle?: string;
        banner?: string;
    } = $props();

</script>

<div class="container">
    <div class="img-container">
        <img src="{banner}">
    </div>
    <div class="text-container">
        <h1 class="title">{title}</h1>
        {#if subtitle}
        <p class="subtitle">{subtitle}</p>
        {/if}
    </div>
</div>

<SeparatorLine />

<style>
    .container {
        position: relative;
        width: 100%;
        height: 600px;
        display: flex;
        flex-direction: row;
        background-color: var(--color-background-highlight);
    }

    .img-container {
        flex-grow: 1;
    }

    .text-container {
        width: 48%;
        margin-top: auto;
        margin-bottom: auto;
        padding-left: 24px;
    }

    .container img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .title {
        width: 100%;
        box-sizing: border-box;
        height: fit-content;
        left: 0;
        right: 0;
        bottom: 0px;
        font-style: italic;
    }

    .subtitle {
        font-size: 1.2rem;
        line-height: 1.6rem;
        font-style: italic;
    }
</style>