<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-white',
  muted: 'bg-[#fbf8f4]',
  primary: 'bg-[#f6f1ea]',
}

const cardClass = computed(() => {
  const paddingClass = paddingMap[props.padding] || paddingMap.medium
  const toneClass = toneMap[props.tone] || toneMap.default
  const interactiveClass = props.interactive
    ? 'cursor-pointer transition-[transform,box-shadow] duration-200 hover:-translate-y-0.5 hover:shadow-[0_18px_34px_rgba(62,47,26,0.12)]'
    : ''
  const baseClass = 'rounded-[28px] border border-[#eadfce] text-[#2f2418] shadow-none'
  return [baseClass, paddingClass, toneClass, interactiveClass].filter(Boolean).join(' ')
})
</script>
