<template>
  <div class="content-card" :class="{ 'has-header': $slots.header }">
    <div v-if="$slots.header" class="card-header">
      <slot name="header" />
    </div>
    <div class="card-body" :style="{ padding }">
      <slot />
    </div>
  </div>
</template>

<script setup>
defineProps({
  padding: { type: String, default: 'var(--card-padding)' }
})
</script>

<style scoped>
.content-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--card-padding);
  border-bottom: 1px solid var(--border-light);
  gap: var(--space-sm);
}
.card-body {
  padding: var(--card-padding);
}
</style>
