<template>
    <v-radio-group 
        v-model="localValue"
        hide-details
        dense
    >
        <template v-slot:label>
            <div
                v-html="__('Selectați statusul clientului <strong>:name</strong>', {name: customerName})"
            >
            </div>
        </template>

        <v-radio
            v-for="(status, index) in statuses"
            :key="'status-' + index"
            :value="status.slug"
            :color="status.props.color"
        >
            <template v-slot:label>
                <strong :class="status.props.color+ '--text'">
                    {{ __(status.name) }}
                </strong>
            </template>
        </v-radio>
    
    </v-radio-group>
</template>

<script>

    export default {
        
        props: {
            value: {default: 'active'},
            statuses: {default: () => []},
            customerName: {default: null},
        },

        computed: {
            localValue: {
                get: function() {
                    return this.value;
                },

                set: function(value) {
                    this.$emit('input', value);
                }
            }
        },

        name: 'CustomerStatusInput',
    }
</script>