<template>
  <div class="icon-block">
    <slot></slot>
    <div class="text-block">
      <p class="license-text">
        {{
          $t('pages.share_pictures.information_text2', {
            word: 'la licence'
          })
        }}
      </p>
      <Link
        :href="url"
        :text="text"
        target="_blank"
        type="external"
        look="link--grey"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import Link from '@/components/Link.vue'
defineProps({
  url: { type: String, default: null },
  text: { type: String, default: null }
})
</script>

<style scoped lang="scss">
.icon-block {
  display: flex;
  font-weight: 600;
}
.text-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.license-text {
  font-weight: bold;
  margin-right: toRem(0.5);
  margin-bottom: 0;
}
</style>
