<template>
  <section class="AiCell" :class="{bottomBorder,alignCenter,topLabel}">
    <div class="label" :class="{title}">
      <slot v-if="$slots.label" name="label"/>
      <span v-else>{{ label }}</span>
    </div>
    <div class="content" :class="{topLabel}">
      <slot/>
    </div>
  </section>
</template>

<script>
export default {
  name: "AiCell",
  props: {
    label: {default: ""},
    bottomBorder: Boolean,
    topLabel: Boolean,
    title: Boolean,
    alignCenter: Boolean
  }
}
</script>

<style lang="scss" scoped>
.AiCell {
  display: flex;
  min-height: 72px;
  font-size: 30px;
  color: #333;
  padding: 14px 0;
  box-sizing: border-box;
  justify-content: space-between;

  &.bottomBorder {
    border-bottom: 1px solid #eee;
  }

  &.alignCenter {
    align-items: center;
  }

  &.topLabel {
    flex-direction: column;
  }

  .label {
    min-width: 60px;
    flex-shrink: 0;
    width: auto;
    color: #999;


    &.title {
      color: #333;
      font-weight: bold;
      font-size: 34px;
    }
  }

  .content {
    flex: 1;
    min-width: 100px;
    min-height: 40px;
    max-width: 500px;
    text-align: right;

    &.topLabel {
      text-align: start;
      margin-top: 16px;
      max-width: 100%;
    }
  }
}
</style>
