<script setup>
import { onMounted, ref } from 'vue';
import { useBurgerStore } from '@/stores/burger'
const burger = useBurgerStore();
onMounted(() => {
  burger.check();
})

const items = ref([
  { id:1,
    selected : true,
    name : "Poils O pattes",
    bg_image : "url('https://picsum.photos/id/20/200/300')"
  },
  { id:2,
   selected : false,
    name : "courses",
    bg_image : "url('https://picsum.photos/id/23/200/300')"
      }
    ]);

const background = () => {
  //console.log(items)
  for (const item of items.value) {
    if (item.selected)
      return item.bg_image    
  };
}
</script>

<template>
  <div class="content">
    <div class="title">
      <div class="logo">
      </div>
      <h3><span>Projects</span></h3> 
    </div>
    <div class = "slider">
      <div class="projects-banner"
      :style="{backgroundImage : background()}"
      >
        <div class="arrow left">
          &#12296; 
        </div>
        <div class="tab">
          <h4 class="project-name">Poils O Pattes</h4>
          <h4 class="project-name toto">Poils O Pattes</h4>
        <!--  v-for="item in items"
          v-bind:key="items.id">
          <h4 class="project-name"
          :style="{opacity:item.selected ? 1 : 0, width : item.selected ? '100%' : 0, display:item.selected ? 'block' : 'none'}" >{{item.name}}</h4>
        -->
        </div>
        <!-- <h4 class="project-title poils" v-else-if="items[1].selected" >Pas POP</h4> -->
        <div class="arrow right">
          &#12297;
        </div>
      </div>
      <div class="project-content">
        <p class="project-description">
          A grooming salon management project undertaken with a team of 5 people over a duration of one month. I had the pleasure of contributing to it as a backend coder and scrum master...
        </p>
        <iframe class="video" src="https://www.youtube.com/embed/Q3WiRGLeXSQ?start=2329" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '../style/colors.scss';
.content{
  & > .title {
    & .logo{
      background-image: url('../assets/maison.svg');
      background-size: 70%;
    }
  }
}
p{
  margin: 0 0.5em;
  line-height: 1.3em;
}
.video{
  display: block;
  width: 90%;
  aspect-ratio: 560/315;
  margin:auto;
}
.projects-banner{
 // position:relative;
  margin: 1em 0.5em;
  height:3em;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  //background-image: url('https://picsum.photos/seed/picsum/200/300');
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
  &.tab{
  }
}

h4.project-name{
  width: 0%;
  //position:absolute;
  display: inline;
  border: 1px solid blueviolet;  
  font-family: 'acme', Arial, Helvetica, sans-serif;
  font-size:1.7em;
  letter-spacing: 0.1em;
  color:$page-bg;
  text-align: center;
}
.arrow{
  color:white;
  font-weight: bold;
  border: 1px solid red;
  &.left{
    
  }
}
.tab{
  overflow-x: hidden;
  & > .project-name{
  }
}

</style>