<template>
    <div :class="['cell', { expanded }]"
    @click="toggleExpand"
    :style="{ justifyContent: expanded ? 'flex-start' : 'center' }"> <!-- Looking for finding a way 
                                                          to make this style in the toggleExpand event -->

      <h3>{{ title }}</h3>
      <p>{{ currentDescription }}</p>
    </div>
</template>
  
<script>
import { ref, onMounted } from "vue";
import axios from "axios";

export default {
  props: {
    title: String,
    description: String,
  },

  setup(props) {
    const expanded = ref(false);
    const currentDescription = ref(props.description);

    const fetchData = async () => {
      try {
        const response = await axios.get("http://localhost:5000/data"); // to edit later!
        currentDescription.value = response.data[0].canva_data;

      } catch (error) {
        console.error("Erreur lors de la récupération des données :", error);
      }
    };

    const toggleExpand = async () => {
      if (!expanded.value) {
        await fetchData();
      } else {
        currentDescription.value = props.description;
      }
      expanded.value = !expanded.value;
    };

    return {
      expanded,
      currentDescription,
      toggleExpand
    };
  }
};
</script>

  
<style scoped>
@import "@/components/canvas/style-project.css";

.cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: all 0.3s ease;
	cursor: pointer;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}

.cell:not(.expanded):hover {
  transform: scale(1.05);
  box-shadow: 0 8px 9px rgba(0, 0, 0, 0.2);
}

.cell h3 {
    font-size: 20px;
    font-weight: 500;
    /*margin-bottom: 10px;*/
}

.cell p {
    font-size: 14px;
    color: #666;
}

.expanded {
  position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: white;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
</style>
