<template>
  <base-box-item :recent-work="recentWork" :type="type" link="/network-vis">
    <template #title>
      {{ title }}
    </template>
    <template #description>
      <p>{{ type }}</p>
      <p class="category-text">
        BRANCH
      </p>
      {{ branch }}
      <p class="category-text">
        MODIFIED
      </p>
      {{ modified }}
    </template>
  </base-box-item>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'New visualization document'
    },
    type: {
      type: String,
      default: 'Network visualization'
    },
    branch: {
      type: String,
      default: 'no branch'
    },
    modified: {
      type: String,
      default: 'few mins ago'
    },
    recentWork: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="sass">
.category-text
  color: $secondary-text-color
  font-weight: 600
  font-size: 0.66rem
</style>
