<template>
  <div :class="[wrapperClass, cardClasses]">
    <slot />
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "NCard",

  props: {
    wrapperClass: {
      type: String,
      default: "",
    },
    radius: {
      type: String,
      default: "md",
      validator(value) {
        return ["xs", "sm", "md", "lg", "0", "50"].includes(value);
      },
    },
  },
  computed: {
    cardClasses() {
      const { radius } = this;

      return `pkg-base-n-card n-p-6 n-bg-element n-radius-${radius}`;
    },
  },
});
</script>

<style scoped>
.pkg-base-n-card {
  box-shadow: 0px 0px 34px 0px rgba(0, 0, 0, 0.08);
}
</style>
