<script lang="ts">
    let {
        title,
        subtitle = "",
        description = "",
        brightBackground = false,
    }: {
        title: string
        subtitle?: string
        description?: string
        brightBackground?: boolean
    } = $props()
</script>

<header
    class="intro"
    class:brightBackground
>
    <small>{subtitle}</small>
    <h2 class="h1">{title}</h2>
    {#if description}
        <p>{description}</p>
    {/if}
</header>

<style lang="less">
    .intro {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;

        small {
            font-size: 0.8rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--text-200);
            font-weight: 600;
        }

        h2 {
            margin: 0;
            font-size: clamp(2rem, 3vw, 2.75rem);
            color: var(--primary-100) !important;
        }

        p {
            margin: 0;
            color: var(--text-200);
            line-height: 1.6;
        }
        &.brightBackground {
            small {
                color: var(--text-invers-100);
            }

            p {
                color: var(--text-invers-100);
            }
        }
    }
</style>
