<template>
  <view class="ep-card" :class="shadowClass">
    <view v-if="$slots.header" class="ep-card__header">
      <slot name="header" />
    </view>
    <view class="ep-card__body">
      <slot />
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({ shadow: { type: String, default: 'always' } })
const shadowClass = computed(() => {
  const s = String(props.shadow || '').toLowerCase()
  if (s === 'hover') return 'is-hover-shadow'
  if (s === 'never') return 'is-no-shadow'
  return 'is-always-shadow'
})
</script>

<style scoped>
.ep-card { background: #fff; border-radius: 12rpx; overflow: hidden; border: 1rpx solid #eee }
.is-always-shadow { box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.06) }
.is-hover-shadow { box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.06) }
.is-no-shadow { box-shadow: none }
.ep-card__header { padding: 12rpx 16rpx; border-bottom: 1rpx solid #f0f0f0 }
.ep-card__body { padding: 12rpx 16rpx }
</style>
