<script lang="ts">
    let {
        content,
        type,
    }: {
        content: string[];
        
        // valid values: warn, quote. defaults to warn
        type: string;
    } = $props();
</script>


<div class="callout-container">
    <p class="callout-symbol">
        {#if type == "quote"}
            »
        {:else}
            !
        {/if}
    </p>
    <div class="callout-text-container">
        {#each content as p}
            {#if type == "quote"}
                <p class="callout-quote-text">{p}</p>
            {:else}
                <p>{p}</p>
            {/if}
        {/each}
    </div>
</div>

<style>
    .callout-container {
        display: flex;
        flex-direction: row;
        max-width: 800px;
        margin: 0 auto;
        align-items: center;
        border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
        background-color: var(--color-background-highlight-alt);
        backdrop-filter: blur(var(--blur-radius-background));
        border-radius: var(--border-radius);
        padding: 16px;
        gap: 16px;
        box-sizing: border-box;
    }

    .callout-symbol {
        font-family: var(--font-mono);
        font-size: 4.0rem;
        font-weight: 700;
        /* font-style: italic; */
    }

    p {
        margin: 0;
        font-size: 1.0rem;
        line-height: 1.4rem;
    }

    .callout-quote-text {
        font-style: italic;
    }

    .callout-text-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
</style>