<template>
  <div class="image-paragraph" :class="imgPos">
      <div class="image">
        <img :src="imgSrc" alt="Image" />
      </div>
      <div class="text">
        <slot></slot>
      </div>
  </div>
</template>

<script>
export default {
  name: "ImageParagraph",
  props: {
    imgSrc: String,
    imgPos: String
  }
};
</script>

<style lang="scss" scoped>
.image-paragraph {
  margin: 1em 0;

  display: flex;
  flex-flow: row;

  &.left .text {
    @media (min-width: 35em) {
      padding-left: 1em;
    }
  }

  &.right .text {
    @media (min-width: 35em) {
      padding-right: 1em;
    }
  }

  &.left,
  &.right {
    flex-wrap: wrap;

    @media (min-width: 35em) {
      flex-wrap: nowrap;
    }

    .image {
      flex: 0 1 100%;

      @media (min-width: 35em) {
        flex: 0 1 50%;
      }
    }

    .text {
      flex: 0 1 100%;
    }
  }

  &.top,
  &.bottom {
    flex-wrap: wrap;
    justify-content: center;

    .image {
      flex: 0 1 auto;
    }

    .text {
      flex: 0 1 100%;
    }
  }

  &.top .text {
    margin-top: 1em;
  }

  &.bottom .text {
    margin-bottom: 1em;
  }

  @media (min-width: 35em) {
    &.bottom .image,
    &.right .image {
      order: 2;
    }
  }

  img {
    max-width: 100%;
  }
}
</style>