<template>
  <div class="footer-style">
    <b-container>
      <b-row  class="custom-padding">
        <b-col class="d-flex justify-content-between" v-if="showButtons">
        <div v-if="false"
          v-for="button in buttons"
          :key="button.title"
        >
          <footer-button v-bind="button" />
        </div>
        </b-col>
      </b-row>
      <hr class="transition-line"/>
      <b-row class="d-flex justify-content-between">
        <b-col md="3" class="d-flex justify-content-start">
          <custom-logo class="d-flex align-self-center"/>
        </b-col>
        <b-col md="6" class="d-flex justify-content-start div-color">
          <company-address />
        </b-col>
        <b-col md="3" class="d-flex justify-content-end div-color">
          <social-media />
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import FooterButton from '@/components/footer/FooterButton.vue';
import CustomLogo from '@/components/shared-components/Logo.vue';
import CompanyAddress from '@/components/footer/CompanyAddress.vue';
import SocialMedia from '@/components/footer/SocialMedia.vue';


export default {
  props:{
    showButtons:{
      default(){
        return true;
      }
    }
  },
  components: {
    CustomLogo,
    SocialMedia,
    FooterButton,
    CompanyAddress,
  },
  data: () => ({
    buttons: [
      {
        title: 'Home',
        routerName: 'Home',
        icon: 'home',
      },
      {
        title: 'Produtos',
        routerName: 'Todos os Produtos',
        icon: 'box',
      },
      {
        title: 'Digitar Pedido',
        routerName: 'Digitar Pedido',
        icon: 'shopping-basket',
      },
      {
        title: 'Meus Pedidos',
        routerName: 'Meus Pedidos',
        icon: 'history',
      },
      {
        title: 'Financeiro',
        routerName: 'Financeiro',
        icon: 'money-check-alt',
      },
    ],
  }),
};

</script>

<style scoped>
.div-color {
  background-color: #FF9B64;
}

.custom-padding {
  padding-top: 10px;
}

.footer-style {
  background-color: #FF9B64;
  /* position: absolute; */
  /* bottom: 0; */
  height: 137px;
  width: 100%;
}
</style>
