<template>
  <router-link
    class="box is-narrow"
    :class="[`box--${type}`, { recentWork }]"
    :to="link"
    @click.native="log()"
  >
    <h3 class="title-is-5 box-title" :class="type">
      <slot name="title">
        Title
      </slot>
    </h3>

    <div class="box-description">
      <p v-if="type !== 'new'" style="margin-bottom: 1rem">
        <slot name="description" />
      </p>
      <div v-else style="text-align: center; margin-top: 1rem">
        <p>
          <font-awesome-icon icon="plus" class="fa-3x" style="color: #ddd" />
        </p>
      </div>
    </div>
  </router-link>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    recentWork: {
      type: Boolean,
      default: false
    },
    link: {
      type: String,
      default: '#'
    }
  },
  methods: {
    log() {
      if (this.type === 'new') {
        this.$emit('new-item')
      }
    }
  }
}
</script>

<style lang="sass" scoped>
.box
  background: white
  padding: 10px 15px
  margin-right: 5px
  margin-bottom: 5px
  min-height: 80px
  border-radius: 15px
  border-style: solid
  border-color: #f3f3f3
  border-width: 1px
  box-shadow: 2px 2px 5px 1px rgba(158,158,160,0.1)

  &.box--new
    opacity: 0.6
    height: 200px

  &:hover
    opacity: 1.0
    border-color: #bbb
    box-shadow: 2px 2px 5px 1px rgba(158,158,160,0.4)


.box-title
  color: #757575
  font-weight: 700
  font-size: 0.9rem
  margin-bottom: 0.2rem
  &.new-item
    color: $secondary-text-color
    text-size: 0.8em

.box-description
  color: $secondary-text-color
  pointer-events: none

.recentWork
  border: 1.5px solid $primary-highlight-color-half

p
  font-size: 0.8rem
</style>
