<script setup>
const props = defineProps({
    title: { type: String, required: true },
    description: { type: String, default: '' },
    badge: { type: String, default: 'Pending' },
    endpoints: { type: Array, default: () => [] },
    notes: { type: Array, default: () => [] }
});
</script>

<template>
    <div class="card">
        <div class="flex items-center justify-between mb-4">
            <h4 class="m-0">{{ props.title }}</h4>
            <Tag severity="warning" :value="props.badge" />
        </div>

        <Message v-if="props.description" severity="warn" icon="pi pi-exclamation-triangle">
            {{ props.description }}
        </Message>

        <div v-if="props.endpoints.length" class="mt-4">
            <div class="font-medium mb-2">Suggested APIs</div>
            <ul class="list-disc pl-5 text-sm text-muted-color">
                <li v-for="item in props.endpoints" :key="item">{{ item }}</li>
            </ul>
        </div>

        <div v-if="props.notes.length" class="mt-4">
            <div class="font-medium mb-2">Notes</div>
            <ul class="list-disc pl-5 text-sm text-muted-color">
                <li v-for="item in props.notes" :key="item">{{ item }}</li>
            </ul>
        </div>
    </div>
</template>
