<script setup lang="ts">
defineProps({
    caption: {
        type: String,
        default: ''
    },
    items: {
        type: Object,
        required: true
    },
    labelKey: {
        type: String,
        default: 'Ключ'
    },
    labelValue: {
        type: String,
        default: 'Значение'
    }
})
</script>
<template>
    <table class="min-w-full mt-4 border-collapse">
        <caption v-if="caption" class="caption-top font-medium text-left">{{ caption }}</caption>
        <thead class="bg-gray-100">
            <tr>
                <th class="border px-4 py-2 text-left">{{ labelKey }}</th>
                <th class="border px-4 py-2 text-left">{{ labelValue }}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(value, key) in items" :key="key">
                <td class="border px-4 py-2">{{ key }}</td>
                <td class="border px-4 py-2">{{ value }}</td>
            </tr>
        </tbody>
    </table>
</template>
