<template>
  <view class="admin-card" :class="cardClass">
    <view class="card-header" v-if="title || $slots.header">
      <view class="card-title-section">
        <text class="card-title">{{ title }}</text>
        <view class="card-extra" v-if="$slots.extra">
          <slot name="extra"></slot>
        </view>
      </view>
    </view>
    <view class="card-body">
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="uts">
import { computed } from 'vue'

// Props
const props = defineProps<{
  title?: string
  bordered?: boolean
  shadow?: string
  bodyStyle?: Record<string, any>
}>()

// Computed
const cardClass = computed(() => {
  return {
    'card-bordered': props.bordered !== false,
    'card-shadow': props.shadow !== 'none',
    'card-shadow-small': props.shadow === 'small',
    'card-shadow-medium': props.shadow === 'medium',
    'card-shadow-large': props.shadow === 'large'
  }
})
</script>

<style lang="scss">
.admin-card {
  background: #fff;
  border-radius: 8rpx;
  overflow: hidden;

  &.card-bordered {
    border: 1rpx solid #e8e8e8;
  }

  &.card-shadow {
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);

    &.card-shadow-small {
      box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.04);
    }

    &.card-shadow-medium {
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    }

    &.card-shadow-large {
      box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
    }
  }
}

.card-header {
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background: #fafafa;
}

.card-title-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #262626;
  margin: 0;
}

.card-extra {
  font-size: 28rpx;
  color: #666;
}

.card-body {
  padding: 32rpx;
}
</style>