<template>
  <div class="flash-infos-container">
    <div class="title-container">
      <IconText :color="$_theme('colorSecondary')" size="m" icon="info">
        <Title :color="$_theme('colorSecondary')" tag="h4">
          {{ $_tr('title').toUpperCase() }}
        </Title>
      </IconText>
    </div>

    <WysiwygBlock>{{ fetchedData.body }}</WysiwygBlock>
  </div>
</template>

<script>
import { IconText, Title } from 'inside-collection/atoms'

import WysiwygBlock from '@inside-wysiwyg/components/lib/WysiwygBlock'

export default {
  name: 'FlashInfosCustoms',
  $_i18nRootPath: 'customs.FLASH_INFOS',
  components: { IconText, WysiwygBlock, Title },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  }
}
</script>

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

.flash-infos-container {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  margin-top: 24px;
  background-color: var(--color-thirdary);

  @include tablet {
    flex-direction: column;
  }

  .title-container {
    position: relative;
    display: flex;
    flex-shrink: 0;

    @include desktop-only {
      padding-right: 24px;
      margin-right: 24px;
    }

    @include tablet {
      margin-bottom: 8px;
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 0;
      width: 1px;
      height: 28px;
      background-color: var(--color-primary);
      transform: translateY(-50%);

      @include tablet {
        content: none;
      }
    }
  }
}
</style>
