<template>
  <div
    v-if="!text"
    :class="[`mm-divider-${type}`, dashed]"></div>
  <div
    v-else
    :class="[`mm-divider-with-text-${orientation}`, dashed]">
    <span>{{ text }}</span>
  </div>
</template>

<script>
export default {
  name: "mm-divider",
  props: {
    type: {
      type: String,
      default: "horizontal",
      validator(value) {
        return ["vertical", "horizontal"].includes(value)
      },
    },
    orientation: {
      type: String,
      default: "center",
      validator(value) {
        return ["left", "center", "right"].includes(value)
      },
    },
    text: {
      type: String,
      default: "",
    },
    dashed: {
      type: String,
      default: "solid",
      validator(value) {
        return ["solid", "dashed"].includes(value)
      },
    },
  },
}
</script>
