<template>
  <div :class="cardClass">
    <slot />
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  padding: {
    type: String,
    default: 'medium', // none | small | medium
  },
  tone: {
    type: String,
    default: 'default', // default | muted | primary
  },
  interactive: {
    type: Boolean,
    default: false,
  },
})

const paddingMap: Record<string, string> = {
  none: '',
  small: 'p-4',
  medium: 'p-6',
}

const toneMap: Record<string, string> = {
  default: 'bg-base-100',
  muted: 'bg-base-200',
  primary: 'bg-primary/10',
}

const cardClass = computed(() => {
  const paddingClass = paddingMap[props.padding] || paddingMap.medium
  const toneClass = toneMap[props.tone] || toneMap.default
  const interactiveClass = props.interactive
    ? 'cursor-pointer hover:shadow-lg transition-shadow duration-200'
    : ''
  const baseClass = 'card'
  return [baseClass, paddingClass, toneClass, interactiveClass].filter(Boolean).join(' ')
})
</script>
