<script setup lang="ts">
defineProps<{ title: string; desc?: string }>()
</script>

<template>
  <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-50 flex items-center justify-between">
      <div>
        <h3 class="font-bold text-text-primary">{{ title }}</h3>
        <p v-if="desc" class="text-xs text-text-secondary mt-0.5">{{ desc }}</p>
      </div>
      <div class="flex gap-2">
        <span class="w-2.5 h-2.5 rounded-full bg-red-400" />
        <span class="w-2.5 h-2.5 rounded-full bg-yellow-400" />
        <span class="w-2.5 h-2.5 rounded-full bg-green-400" />
      </div>
    </div>
    <div class="p-0">
      <slot />
    </div>
  </div>
</template>
