<template>
  <section class="bill-panel" :class="panelClass" :style="panelStyle">
    <header
      v-if="$slots.header"
      class="bill-panel__header"
      :class="headerClass"
      :style="sectionStyle"
    >
      <slot name="header" />
    </header>

    <div class="bill-panel__body" :class="bodyClass" :style="sectionStyle">
      <slot />
    </div>

    <footer
      v-if="$slots.footer"
      class="bill-panel__footer"
      :class="footerClass"
      :style="sectionStyle"
    >
      <slot name="footer" />
    </footer>
  </section>
</template>

<script>
const BILL_DEFAULT_PANEL_PADDING = 16
const BILL_DEFAULT_PANEL_RADIUS = 8

export default {
  name: 'BillPanel',
  props: {
    panelClass: {
      type: [String, Array, Object],
      default: ''
    },
    headerClass: {
      type: [String, Array, Object],
      default: ''
    },
    bodyClass: {
      type: [String, Array, Object],
      default: ''
    },
    footerClass: {
      type: [String, Array, Object],
      default: ''
    },
    padding: {
      type: Number,
      default: BILL_DEFAULT_PANEL_PADDING
    },
    borderRadius: {
      type: Number,
      default: BILL_DEFAULT_PANEL_RADIUS
    },
    bordered: {
      type: Boolean,
      default: true
    },
    shadow: {
      type: Boolean,
      default: false
    },
    background: {
      type: String,
      default: '#fff'
    }
  },
  computed: {
    panelStyle() {
      return {
        background: this.background,
        borderRadius: `${this.borderRadius}px`,
        border: this.bordered ? '1px solid #e8ecf3' : 'none',
        boxShadow: this.shadow ? '0 2px 8px rgba(15, 35, 95, 0.06)' : 'none'
      }
    },
    sectionStyle() {
      return {
        padding: `${this.padding}px`
      }
    }
  }
}
</script>

<style scoped lang="scss">
@use '@/styles/bill-tokens.scss' as *;

.bill-panel {
  width: 100%;
  box-sizing: border-box;
  color: $bill-text-primary;
}

.bill-panel__header,
.bill-panel__body,
.bill-panel__footer {
  width: 100%;
  box-sizing: border-box;
}

.bill-panel__header {
  padding-bottom: $bill-space-12;
}

.bill-panel__footer {
  padding-top: $bill-space-12;
}

.bill-panel__header:empty,
.bill-panel__footer:empty {
  display: none;
}
</style>
