<script setup>
import { computed } from 'vue'
import { twMerge } from 'tailwind-merge'

const props = defineProps({
  padding: {
    type: String,
    default: 'md',
    validator: v => ['none', 'sm', 'md', 'lg'].includes(v),
  },
})

const classes = computed(() => {
  const base =
    'rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900'
  const paddings = {
    none: '',
    sm: 'p-4',
    md: 'p-4',
    lg: 'p-8',
  }
  return twMerge(base, paddings[props.padding])
})
</script>

<template>
  <div :class="classes">
    <slot name="header" />
    <slot />
    <slot name="footer" />
  </div>
</template>
