<template>
  <div :class="_class">
    <div :class="_timeClass">
      <slot name="time" />
    </div>
    <div :class="_rightClass">
      <div :class="_contentClass">
        <slot name="content" />
      </div>
      <div :class="_detailClass">
        <slot name="detail" />
      </div>
    </div>
  </div>
</template>

<script>
const name = 'hive-timeline-item';

export default {
  name,
  props: {
    active: Boolean
  },

  computed: {
    _class() {
      return [
        name,
        {
          [`${name}-active`]: this.active
        }
      ];
    },
    _timeClass() {
      return [
        `${name}-time`
      ];
    },
    _rightClass() {
      return [
        `${name}-right`
      ];
    },
    _contentClass() {
      return [
        `${name}-content`
      ];
    },
    _detailClass() {
      return [
        `${name}-detail`
      ];
    }
  }
};
</script>
