<template>
  <view
    class="m-card"
    :style="{
      padding: `${padding}rpx`,
      background: `${bgColor}`,
    }"
    :class="[`${rounded ? 'rounded-16rpx' : ''}`, `${spaceClass}`]"
  >
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
  defineOptions({
    name: 'MCard',
    options: {
      styleIsolation: 'shared',
      virtualHost: true,
    },
  })

  const props = withDefaults(
    defineProps<{
      align?: 'center'
      bgColor?: string
      border?: boolean
      direction?: 'horizontal' | 'vertical'
      justify?: 'around' | 'between' | 'center' | 'end' | 'evenly' | 'start'
      padding?: number | string
      rounded?: boolean
      space?: boolean
    }>(),
    {
      bgColor: 'var(--bg-card)',
      padding: 32,
      rounded: true,
      border: false,
      space: false,
      direction: 'vertical',
      align: 'center',
      justify: 'start',
    }
  )

  const spaceClass = computed(() => {
    if (props.space) {
      let cls = `flex gap-16px items-${props.align}`
      if (props.direction === 'vertical') {
        cls = `${cls} flex-col`
      }
      if (props.justify) {
        cls = `${cls} justify-${props.justify}`
      }
      return cls
    } else {
      return ''
    }
  })
</script>

<style scoped lang="scss">
  .m-card {
    @apply my-12px;
    .m-card-item {
      @apply w-full;
    }
    .m-card-spacer {
      @apply h-1px bg-border-1 my-4px w-full;
    }
    .m-card-spacer-horiz {
      @apply h-20px w-1px bg-border-1 my-4px;
    }
  }
</style>
