<script lang="ts">
    let {
        title,
        subtitle = "",
        banner = "",
    }: {
        title: string;
        subtitle?: string;
        banner?: string;
    } = $props();

</script>

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

<style>
    .container {
        position: relative;
        width: 100%;
        height: 500px;
    }

    .container img {
        position: absolute;
        left: 0;
        top: 0;
        height: 500px;
        width: 100%;
        object-fit: cover;
    }

    .title {
        position: absolute;
        width: 100%;
        box-sizing: border-box;
        height: fit-content;
        padding: 12px 24px;
        left: 0;
        right: 0;
        bottom: 0px;
        background-image: linear-gradient(to right, #00000088, #000000AA);
    }

    .subtitle {

    }
</style>