<script lang="ts">
    // TODO: Design a more _formal_ color system for emotions (>strong = >weight, etc).
    const DEFAULT_COLORS: {[index: string]: string[]} = {
        "__DEFAULT__": ["#0a0a0a", "#fafafa"],
        "afraid": ["#fda4af", "#0a0a0a"],
        "angry": ["#dc2626", "#fafafa"],
        "bad": ["#450a0a", "#fafafa"],
        "bored": ["#d4d4d8", "#0a0a0a"],
        "confused": ["#fef3c7", "#0a0a0a"],
        "excited": ["#f97316", "#fafafa"],
        "fine": ["#bef264", "#0a0a0a"],
        "happy": ["#facc15", "#0a0a0a"],
        "hurt": ["#ff69b4", "#0a0a0a"],
        "in love": ["#ff1493", "#fafafa"],
        "mad": ["#450a0a", "#fafafa"],
        "nervous": ["#7e22ce", "#fafafa"],
        "okay": ["#86efac", "#0a0a0a"],
        "sad": ["#0284c7", "#fafafa"],
        "scared": ["#334155", "#fafafa"],
        "shy": ["#cbd5e1", "#0a0a0a"],
        "sleepy": ["#7dd3fc", "#0a0a0a"],
        "active": ["#059669", "#fafafa"],
        "surprised": ["#fbbf24", "#0a0a0a"],
        "tired": ["#92400e", "#fafafa"],
        "upset": ["#b91c1c", "#fafafa"],
        "worried": ["#d4d4d8", "#0a0a0a"],
        "relaxed": ["#86efac", "#0a0a0a"],
    };

    export let feeling: "relaxed" | "afraid" | "angry" | "bad" | "bored" | "confused" | "excited" | "fine" | "happy" | "hurt" | "in love" | "mad" | "nervous" | "okay" | "sad" | "scared" | "shy" | "sleepy" | "active" | "surprised" | "tired" | "upset" | "worried" | string
    export let bgColor: string = (DEFAULT_COLORS[feeling] || DEFAULT_COLORS["__DEFAULT__"])[0]
    export let textColor: string = (DEFAULT_COLORS[feeling] || DEFAULT_COLORS["__DEFAULT__"])[1]
    export let slim = false;
</script>

<div class={`inline-block py-0.5 px-1.5 rounded-full ${slim ? "text-xs" : "text-sm"} font-semibold w-22 text-center`} style={`background-color: ${bgColor}; color: ${textColor}`}>
    <slot name="pre"/>

    <span>{feeling.charAt(0).toUpperCase() + feeling.slice(1)}</span>
</div>