<template>
  <div class="download-ebook-container mb-xl">
    <img v-if="image" :src="image" alt="brand_image" class="brand-sop-img" />

    <Title tag="h5" class="ml-l">{{ $_tr('title') }}</Title>

    <HomeEbookButton :brand="brandUuid" />
  </div>
</template>

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

import HomeEbookButton from './sub-components/HomeEbookButton'

export default {
  name: 'DownloadEbook',
  $_i18nRootPath: 'customs.HOME_PAGE.ebook',
  components: {
    Title,
    HomeEbookButton
  },
  props: {
    image: {
      type: String
    },
    brandUuid: {
      type: String,
      required: true
    }
  }
}
</script>

<style lang="scss">
.download-ebook-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: var(--shadow-default);

  .brand-sop-img {
    max-width: 160px;
    max-height: 64px;
  }
}

.inside-radius {
  .download-ebook-container {
    border-radius: var(--radius-s);
    overflow: hidden;
  }
}
</style>
