<script setup>
const props = defineProps(['content']);

import { parse } from '~/services/widgets/DiceParser';
import { AddSound } from '~/services/Sound';

const container = ref(null);
const resultText = ref("");

const rollDice = () => {
    console.log(props.content);
    const result = parse(props.content);
    console.log(result);
    resultText.value = result.total;
};

onMounted(() => {
    AddSound(container.value);
});
</script>

<template>
    <div class="roll-widget" ref="container">
        <div class="roll-widget-body">
            <button class="btn-primary btn-inline sound-click" @click="rollDice">
                <span class="dice-content">
                    <!-- Dice icon (SVG) -->
                    <img class="icon" src="/icons/iconoir/regular/dice-three.svg" draggable="false">

                    <!-- Result text -->
                    <span class="result-text">
                        {{ resultText || props.content }}
                    </span>
                </span>
            </button>
        </div>
    </div>
</template>

<style scoped>
.roll-widget {
    display: inline-flex; /* or inline-block */
    vertical-align: middle; /* keeps it aligned nicely with text */
}

.btn-inline {
    padding: 2px 6px;
}

.dice-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.result-text {
    font-weight: 500;
}
</style>