<script lang="ts">
  import stick from '../../../assets/images/back-office/icon-content-stick.svg';

  export let reverse: boolean;
  export let id: string | undefined | null;
  export let image: string;
  export let tag: string;
  export let name: string;
  export let bg: boolean;
  export let title: string;
  export let text: string;
  export let list: string[];
</script>

<div class="block-content {bg ? 'blue' : ''} {reverse ? 'reverse' : ''}" {id}>
  <div class="container">
    <div class="block-content__wrapper">
      <img src={image} alt="" class="block-content__image" loading="lazy" />
      <div class="block-content__content">
        <div class="block-content__tag {name}">{tag}</div>
        <p class="block-content__title">{title}</p>
        <p class="block-content__text">{text}</p>
        <div class="block-content__list">
          {#each list as text}
            <div class="block-content__listItem">
              <div class="block-content__listItemIcon">
                <img src={stick} alt="" loading="lazy" />
              </div>
              <div class="block-content__listItemText">{@html text}</div>
            </div>
          {/each}
        </div>
      </div>
    </div>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/media';
  @import 'src/scss/mixins';

  .block-content {
    padding: 60px 0;

    @include breakpoint-down('deskL') {
      padding: 128px 0;
    }

    @include breakpoint-down('deskS') {
      padding: 70px 0;
    }

    @include breakpoint-down('tabM') {
      padding-top: 0;
      padding-bottom: 84px;
    }

    &__wrapper {
      display: flex;
      align-items: center;
      gap: 160px;

      @include breakpoint-down('deskL') {
        gap: 128px;
      }

      @include breakpoint-down('deskS') {
        gap: 20px;
        justify-content: space-between;
      }

      @include breakpoint-down('tabM') {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
      }
    }

    &__image {
      max-width: 680px;
      max-height: 680px;

      @include breakpoint-down('deskL') {
        max-width: 544px;
        max-height: 544px;
      }

      @include breakpoint-down('deskS') {
        max-width: none;
        max-height: none;
        width: 54.22%;
      }

      @include breakpoint-down('tabM') {
        width: calc(100% + 40px);
        max-width: 375px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    &__content {
      width: 100%;
      max-width: 560px;

      @include breakpoint-down('deskS') {
        max-width: none;
        width: 43%;
      }

      @include breakpoint-down('tabM') {
        width: 100%;
      }
    }

    &__tag {
      width: max-content;
      font-size: 12px;
      line-height: 16px;
      font-weight: 400;
      margin-bottom: 24px;
      border-radius: 24px;
      padding: 3px 21px;

      @include breakpoint-down('deskL') {
        @include smallDefault;

        margin-bottom: 16px;
        padding: 1px 19px;
      }

      @include breakpoint-down('deskS') {
        margin-bottom: 8px;
      }

      &:global(.module) {
        border: 1px solid #ffb31f;
        background: #fffbe3;
        color: rgba(221, 154, 91, 1);
      }
      &:global(.service) {
        border: 1px solid #4aa664;
        background: #b8f0d1;
        color: rgba(74, 166, 100, 1);
      }
    }

    &__title {
      @include titleXL;

      margin-bottom: 24px;

      @include breakpoint-down('deskS') {
        margin-bottom: 16px;
      }
    }

    &__text {
      margin-bottom: 40px;

      @include breakpoint-down('deskL') {
        margin-bottom: 24px;
      }

      @include breakpoint-down('deskS') {
        margin-bottom: 16px;
      }
    }

    &__list {
      display: flex;
      flex-direction: column;
      gap: 24px;

      @include breakpoint-down('deskS') {
        gap: 16px;
      }
    }

    &__listItem {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    &__listItemIcon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      min-width: 40px;
      max-width: 40px;
      height: 40px;
      min-height: 40px;
      max-height: 40px;
      background: $techBlue2;
      border-radius: 40px;

      > img {
        width: 30px;
        height: 30px;
      }
    }

    &__listItemText {
      max-width: 374px;
      width: 100%;
    }

    &:global(.blue) {
      background: $techBlue1;
    }

    &:global(.reverse) {
      .block-content__wrapper {
        flex-direction: row-reverse;

        @include breakpoint-down('tabM') {
          flex-direction: column;
        }
      }
    }
  }
</style>