<template>
  <div class="info-block">
    <div class="d-flex justify-content-between mb-16">
      <p class="info-block__title">
        {{ title }}
      </p>
      <UiBadge v-if="badge" type="marketing">
        {{ badge }}
      </UiBadge>
    </div>

    <slot name="info" />

    <span class="info-block__text">{{ text }}</span>

    <UiButton
      class="info-block__action"
      type="outlined"
      :href="link"
      right-icon="s-chevron-right"
      size="small"
    >
      {{ action }}
    </UiButton>
  </div>
</template>

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

<style lang="scss">
.info-block {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 270px;
  min-height: 179px;
  border-radius: 12px;
  padding: 16px;

  background-color: $clr-grey-100;

  &__title {
    @include txt-m-sb;
  }

  &__text {
    @include txt-s;
    margin-bottom: 16px;
    color: $clr-grey-500;
  }

  &__action {
    margin-top: auto;
    align-self: flex-start;
  }
}

.info-block-addInfo {
  @include txt-s;
  margin-bottom: 16px;

  &__title {
    margin-bottom: 4px;
    color: $clr-grey-500;
  }

  &__sum {
    @include txt-m-sb;
  }

  &__text {
    @include txt-r;
    color: $clr-grey-400;
  }
}
</style>
