<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const props = defineProps({
    usesMana: {
        type: Boolean,
        required: true,
    },
    manaCode: {
        type: String,
        required: true,
    },
    manaVal: {
        type: String,
        default: 'mana',
    },
    manaLabel: {
        type: String,
        default: 'Promotion mana',
    },
    manaClaimVal: {
        type: String,
        default: 'manaClaim',
    },
    claimLabel: {
        type: String,
        default: 'Claim mana',
    },
});

const manaCode = ref(props.manaCode);
</script>

<template>
    <div class="column q-gutter-y-sm q-mt-sm">
        <QRadio
            v-model="manaCode"
            dense
            :val="manaVal"
            :label="t(manaLabel)"
            :dark="true"
            class="q-mb-sm"
        />
        <QRadio
            v-model="manaCode"
            dense
            :val="manaClaimVal"
            :label="t(claimLabel)"
            :dark="true"
            class="q-mb-sm"
        />
    </div>
</template>
