<script lang="ts">
    // currently available reactions: pointing, joy, quote, warn
    let {
        reaction,
        text,
    }: {
        reaction: string;
        text: string;
    } = $props();

    function getReactionAlt(r: string): string {
        switch (r) {
            case "joy":
                return "";
            case "quote":
                return "";
            case "pointing":
                return "";
            case "warn":
                return "";
            default:
                return "reaction image missing";
        }
    }
</script>

<div class="reaction-container blurred-background">
    <div class="reaction-content-container">
        <img src="/reactions/{reaction}.webp" alt={getReactionAlt(reaction)}>
        <p>{text}</p>
    </div>
</div>

<style>
    .reaction-container {
        max-width: 800px;
        margin: 32px auto;
        overflow: hidden;
    }

    .reaction-content-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 0 64px;
        padding: 16px;
        border-radius: var(--border-radius);
        border-left: var(--border-style) var(--border-dash-size) var(--color-text);
        border-right: var(--border-style) var(--border-dash-size) var(--color-text);
        gap: 16px;
    }

    img {
        width: 160px;
    }

    p {
        margin: 0;
    }

    @media screen and (max-width: 600px) {
        .reaction-content-container {
            flex-direction: column;
            gap: 8px;
        }
    }

    @media screen and (max-width: 450px) {
        .reaction-content-container {
            margin: 0 32px;
        }
    }
</style>