<template>
  <component-listing
    v-if="fetchedData.length"
    id="homepage-flash-infos-listing"
    :static-data="fetchedData"
    :pagination="false"
    :fractions="1"
    direction="vertical"
  >
    <template #default="{ item }">
      <Container
        :border="false"
        :background="true"
        :background-color="$_theme('colorPrimary')"
        class="home-flash-infos-container"
      >
        <IconText icon="warning" :color="$_theme('colorLight')">
          <Title tag="h5" :dark-mode="true">
            {{ item.title }}
          </Title>
        </IconText>

        <paragraph-listing
          :herited-data="item.content"
          :herited-options="{
            template: true
          }"
          class="default-text"
        />
      </Container>
    </template>
  </component-listing>
</template>

<script>
import { Container } from 'inside-collection/components'
import { IconText, Title } from 'inside-collection/atoms'

export default {
  name: 'HomeFlashInfos',
  components: { Container, IconText, Title },
  props: {
    fetchedData: {
      type: Array
    }
  }
}
</script>

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

.home-flash-infos-container {
  display: flex;
  align-items: center;
  padding: var(--spacing-m) var(--spacing-xl);
  margin: var(--spacing-3xl) var(--spacing-0);

  @include mobile {
    flex-direction: column;
  }

  &:last-child {
    margin-bottom: var(--spacing-s) !important;
  }

  .ds-icon-text-container {
    max-width: 300px;
    min-width: 250px;

    @include tablet {
      min-width: 200px;
    }
  }

  .default-text {
    p,
    a {
      color: var(--color-light) !important;
      font-size: var(--font-size-labor);
      font-weight: var(--font-weight-normal);
      font-family: var(--font-primary);
    }

    a {
      text-decoration: underline;
    }
  }
}
</style>
