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

  export let name: string;
  export let title: string;
  export let titleBg: string;
  export let text: string;
  export let list: { text: string; theme: boolean }[];
</script>

<div class="block-theme {name}">
  <div class="container">
    <div class="block-theme__wrapper">
      <div class="block-theme__content">
        <p class="block-theme__title {titleBg}">{title}</p>
        <p class="block-theme__text">{text}</p>
      </div>
      <div class="block-theme__list">
        {#each list as text}
          <div class="block-theme__listItem {text.theme ? 'blue' : ''}">
            <p class="block-theme__listItemText">{text.text}</p>
            <img src={stick} alt="" class="block-theme__listItemIcon" loading="lazy" />
          </div>
        {/each}
      </div>
    </div>
  </div>
</div>

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

  .block-theme {
    padding: 73px 0;

    @include breakpoint-down('deskS') {
      padding-top: 27px;
      padding-bottom: 43px;
    }

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

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

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

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

      @include breakpoint-down('tabM') {
        flex-direction: column;
        gap: 16px;
      }
    }

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

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

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

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

    &__title {
      @include titleXXL;

      margin-bottom: 24px;
      position: relative;

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

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

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

      &:after {
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        left: -50px;
        right: 0;
        bottom: 0;
      }

      &:global(.yellow) {
        &:after {
          background: linear-gradient(90deg, #fffbe3 0%, rgba(255, 251, 227, 0) 154.09%);
        }
      }

      &:global(.green) {
        &:after {
          background: linear-gradient(90deg, #dcf2e6 0%, rgba(220, 242, 230, 0) 100%);
        }
      }
    }

    &__list {
      width: 100%;
      max-width: 440px;

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

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

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

    &__listItem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 23px 44px 22px 40px;
      border-bottom: 1px dashed $techBlueSecondary;

      @include breakpoint-down('deskL') {
        padding-right: 49px;
      }

      @include breakpoint-down('deskS') {
        padding: 14px 26px 14px 16px;
      }

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

    &__listItemIcon {
      width: 30px;
      min-width: 30px;
      max-width: 30px;
      height: 30px;
      min-height: 30px;
      max-height: 30px;
    }

    &:global(.module) {
      .block-theme__content {
        padding-top: 74px;

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

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

    &:global(.service) {
      padding: 149px 0;

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

      @include breakpoint-down('tabM') {
        padding: 79px 0;
      }
    }
  }
</style>