<template>
  <div class="footer-info-block">
    <div class="footer-info-block__left">
      <UiIconAskForDiscountFilled class="footer-info-block__icon" />
      <div>
        <h3 class="footer-info-block__title">
          {{ title }}
        </h3>
        <p class="footer-info-block__text">
          {{ text }}
        </p>
      </div>
    </div>

    <div class="footer-info-block__right">
      <UiButton
        color="secondary"
        right-icon="s-chevron-right"
      >
        {{ action }}
      </UiButton>
    </div>
  </div>
</template>

<script setup>
defineProps({
  title: { type: String, required: true },
  text: { type: String, required: true },
  action: { type: String, required: true },
})
</script>

<style lang="scss">
.footer-info-block {
  display: flex;

  &__title {
    color: $clr-grey-600;
    margin-bottom: 8px;
  }

  &__text {
    color: $clr-grey-500;
    width: 512px;
  }

  &__icon {
    color: $clr-market-500 !important;
    margin-right: 32px;
    padding: 9px;
    box-sizing: content-box;
  }

  &__left {
    display: flex;
    flex: 1;

    border-bottom-left-radius: 12px;
    border-top-left-radius: 12px;

    background-color: $clr-grey-200;
    padding: 24px 20px;
  }

  &__right {
    display: flex;
    align-items: center;
    justify-content: center;

    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
    background-color: $clr-grey-300;

    width: 286px;
  }
}
</style>
