<template>
  <div
    :title="filename"
    class="background-white rounded-x-small hidden-overflow rel"
    :class="[
      {'border-gray': !selected},
      {'border-primary': selected},
      {'hover:border-primary': hover},
      {'cursor-pointer': hover},
      {'basefile': hover}
  ]">
    <i
      class="far abs text-large top-margin-x-small left-margin-x-small"
      :class="[
        {'text-primary': selected},
        {'fa-check-square': selected},
        {'text-gray': !selected},
        {'hidden': !selected},
        {'fa-square': !selected},
      ]"
      style="z-index:2"
    />

    <div
      class="background-gray rel"
      :class="[{'bottom-border-gray': !selected}, {'bottom-border-primary': selected}, {'hover:border-primary': hover}]"
      style="height:5rem;z-index:1">
      <img
        v-if="thumbnail"
        :src="thumbnail"
        :alt="filename"
        class="image-cover"
      />
      <i
        v-if="extension === '.pdf'"
        class="fas fa-file-pdf bigger-text-medium text-gray center-middle-absolute"
      />
    </div>
    <div
      class="text-x-small padding-x-small text-ellipsis"
      :class="[{'text-gray': !selected}, {'text-primary': selected}]"
    >
      {{filename}}
    </div>
  </div>
</template>

<style scoped>
  .basefile:hover .far.hidden {
    display: block!important;
  }
</style>

<script>
export default {
  name: 'BaseFile',
  props: {
    thumbnail: {
      type: String,
    },
    filename: {
      type: String,
      default: 'file.ext',
    },
    selected: {
      type: Boolean,
      default: false
    },
    extension: {
      type: String,
    },
    hover: {
      type: Boolean,
      default: false
    }
  },
}
</script>