<template>
  <section class="ai-card" :class="{panel}">
    <ai-bar v-if="!hideHeader" :title="title" v-bind="$attrs">
      <template #title>
        <slot name="title"></slot>
      </template>
      <template #right>
        <slot name="right"></slot>
      </template>
    </ai-bar>
    <div class="ai-card__body">
      <slot v-if="$scopedSlots.content" name="content"/>
      <slot v-else/>
    </div>
  </section>
</template>

<script>
export default {
  name: 'AiCard',
  props: {
    title: {
      type: String
    },
    hideTitle: Boolean,
    panel: Boolean
  },
  computed: {
    hideHeader: v => v.hideTitle || v.panel
  }
}
</script>

<style scoped lang="scss">
.ai-card {
  margin-bottom: 20px;
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
  border-radius: 2px;

  .ai-card__body {
    padding: 12px 40px 22px;
  }

  &.panel {
    margin-bottom: 0;

    .ai-card__body {
      padding: 12px 16px;
    }
  }


}
</style>
