<template>
  <base-box-item :recent-work="recentWork" :type="type" :link="`/`">
    <template #title>
      {{ title }}
    </template>

    <template #description>
      <span>{{ type }}</span>
      <span class="category-text">BRANCH </span>{{ branch }}
      <span class="category-text">MODIFIED </span>{{ 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
    }
  }
}
</script>

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