<template>
  <div class="mm-timeline-item">
    <div class="mm-timeline-item-tail"></div>
    <div
      :class="dotClass"
      class="mm-timeline-item-dot-wrapper">
      <slot name="dot">
        <div
          :class="dotClass"
          :style="dotStyle"
          class="mm-timeline-item-dot"></div>
      </slot>
    </div>
    <div class="mm-timeline-item-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "mm-timeline-item",
  props: {
    color: {
      type: String,
      default: "blue",
    },
  },
  computed: {
    dotClass() {
      const dotClass = {}
      dotClass[`mm-timeline-item-dot__${this.color}`] = /blue|red|green/.test(this.color)
      return dotClass
    },
    dotStyle() {
      const color = /blue|red|green/.test(this.color) ? undefined : this.color
      return {
        borderColor: color,
        color,
      }
    },
  },
}
</script>
