<template>
  <div class="image-preview">
    <div class="close-preview">
      <p>preview</p>
      <i class="icon-close-icon" @click="$emit('close')"></i>
    </div>
    <div class="show-preview">
      <img class="image" :src="previewImage">
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImagePreview',
  props: ['classNames', 'previewImage'],
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang="sass" scoped>
  @import "../styles/global"
  .image-preview
    display: grid
    grid-template-rows: auto 1fr
    grid-column: 1 / 2
    grid-row: 1 / 2
    z-index: 1000
    background-color: white
    .close-preview
      display: grid
      grid-template-columns: 1fr 1fr
      background-color: $light-primary-color
      padding: 20px 40px
      font-size: 18px
      color: #FFF
      .icon-close-icon
        font-size: 16px
        justify-self: end
        cursor: pointer
    .show-preview
      justify-self: center
      align-self: center
      .image
        width: 650px
        height: auto
</style>
