<template>
    <v-card flat border="sm grey-lighten-2" color="grey-lighten-3" class="w-100">
        <v-card-text>
            <v-row no-gutters>
                <v-col cols="10" no-gutters>
                    <v-row no-gutters class="ga-1">
                        <template v-for="(label, key) in displayFields" :key="key">
                            <v-col v-if="member[key]" cols="12">
                                <span class="d-flex ga-3 align-center"><strong>{{ label }}:</strong> {{ member[key]
                                }}</span>
                            </v-col>
                        </template>
                    </v-row>
                </v-col>
                <v-col cols="2" class="d-flex align-center justify-center">
                    <v-btn icon="mdi-trash-outline" size="small" color="red" @click="emit('remove')" />
                </v-col>
            </v-row>
        </v-card-text>
    </v-card>
</template>

<script setup lang="ts">

const prop = defineProps({
    member: {
        type: Object as PropType<TMemberInfo>,
        required: true
        },
        visitorPassItems: {
            type: Array as PropType<TPassKey[]>,
            default: () => []
        }
})

const emit = defineEmits(['remove'])


const displayFields: Record<keyof TMemberInfo, string> = {
    name: "Name",
    nric: "NRIC",
    visitorPass: "Pass",
    contact: "Contact"
} as const

</script>

<style scoped></style>