<template>
  <view class="panel" :class="{ 'no-padding': noPadding }">
    <view class="panel-header">
      <slot name="header"></slot>
    </view>
    <view class="panel-main">
      <slot name="main"></slot>
    </view>
    <view class="panel-footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">

const props = defineProps({
  noPadding: {
    type: Boolean,
    default: false,
  }
});
</script>

<style>
.panel {
  position: relative;
  width: 100%;
  min-height: 80upx;
  height: fit-content;
  background-color: #fff;
  border-radius: 24upx;
  padding: 30upx;
  margin: 30upx 0;
}

.no-padding {
  padding: 0 !important;
}
</style>
