<template>
  <div class="block-pp-infos default-text">
    <div>
      <BaseText>{{ $_tr('definition') }}</BaseText>

      <WysiwygBlock class="default-text">
        {{ definition }}
      </WysiwygBlock>
    </div>

    <div>
      <BaseText>{{ $_tr('policy') }}</BaseText>

      <WysiwygBlock class="default-text"> {{ policy }} </WysiwygBlock>
    </div>
  </div>
</template>

<script>
import { BaseText } from 'inside-collection/atoms'

import WysiwygBlock from '@inside-wysiwyg/components/lib/WysiwygBlock'

export default {
  name: 'BlockPPInfos',
  $_i18nRootPath: 'customs.pp.INFOS',
  components: {
    BaseText,
    WysiwygBlock
  },
  props: {
    definition: {
      type: String
    },
    policy: {
      type: String
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.block-pp-infos {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--spacing-l) var(--spacing-xl);
  margin-top: var(--spacing-l);
  border: var(--border-default);

  > div {
    &:first-child {
      position: relative;
      padding-bottom: var(--spacing-l);
      margin-bottom: var(--spacing-l);

      &::before {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 150px;
        height: 1px;
        background: var(--color-grey-200);
        transform: translateX(-50%);
        content: '';
      }
    }

    > p:first-child {
      margin-bottom: var(--spacing-s);
      font-size: var(--font-size-h4);
      font-weight: 600;
    }
  }

  @include mobile {
    flex-direction: column;

    > div {
      width: 100%;

      &:first-child {
        padding: 0 0 var(--spacing-l) 0;
        margin-bottom: 0 0 var(--spacing-l) 0;

        &::before {
          position: absolute;
          top: 100%;
          right: 50%;
          width: 80px;
          height: 1px;
          transform: translateX(50%);
        }
      }
    }
  }
}

.inside-radius {
  .block-pp-infos {
    border-radius: var(--radius-m);
  }
}
</style>
