<template>
  <div
    :class="[
      `bg-white/${bgOpacity} backdrop-blur-${blurLevel} rounded-xl border border-white/30 shadow-lg`,
      className
    ]"
  >
    <slot></slot>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

defineProps({
  className: {
    type: String,
    default: ''
  },
  bgOpacity: {
    type: Number,
    default: 80,
    validator: (value) => value >= 0 && value <= 100
  },
  blurLevel: {
    type: String,
    default: 'sm',
    validator: (value) => ['none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].includes(value)
  }
})
</script>