<template>
    <BaseDialog
        :model-value="modelValue"
        :title="dialogTitle"
        size="large"
        :width="1220"
        max-width="96vw"
        @update:model-value="$emit('update:modelValue', $event)"
        @close="$emit('close')"
    >
        <OrdersPanel :club-id="clubId" :member="member" />
        <template #footer>
            <button type="button" class="cancel-action" @click="$emit('update:modelValue', false)">
                {{ $t('common.close') }}
            </button>
        </template>
    </BaseDialog>
</template>

<script>
import BaseDialog from './BaseDialog.vue';
import OrdersPanel from './OrdersPanel.vue';

export default {
    name: 'MemberOrdersDialog',
    components: {
        BaseDialog,
        OrdersPanel
    },
    props: {
        modelValue: {
            type: Boolean,
            required: true
        },
        clubId: {
            type: [String, Number],
            required: true
        },
        member: {
            type: Object,
            default: null
        }
    },
    emits: ['update:modelValue', 'close'],
    computed: {
        dialogTitle() {
            if (!this.member) {
                return this.$t('orders.title');
            }
            return this.$t('orders.memberTitle', {
                name: [this.member.firstName, this.member.lastName].filter(Boolean).join(' ')
            });
        }
    }
};
</script>
