<template>
  <section class="ai-card">
    <ai-bar v-if="!hideTitle" :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 name="content"></slot>
    </div>
  </section>
</template>

<script>
export default {
  name: 'AiCard',
  props: {
    title: {
      type: String
    },
    hideTitle: Boolean
  }
}
</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;
  }
}
</style>
