<template>
  <Block :title="$_tr('title')" title-tag="h5" class="mb-xl">
    <div class="img-infos-block">
      <img
        v-if="image"
        :src="image"
        alt="project_image"
        class="project-image mr-m"
      />

      <BaseText v-if="information" v-html="information" />
    </div>
  </Block>
</template>

<script>
import Block from '@inside-commons/components/lib/Block'

import { BaseText } from 'inside-collection/atoms'

export default {
  name: 'ProjectInformation',
  $_i18nRootPath: 'customs.PROJECTS.information',
  components: { Block, BaseText },
  props: {
    information: {
      type: String
    },
    image: {
      type: String
    }
  }
}
</script>

<style lang="scss" scoped>
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.img-infos-block {
  display: flex;

  @include tablet {
    flex-direction: column;
  }

  img.project-image {
    max-width: 300px;
    max-height: 200px;
  }
}
</style>
