﻿<script setup>
import { useBrandingStore } from "@/stores/brandingStore.js";
import { ref } from "vue";

const branding = useBrandingStore();
const menu = ref(false); // C'est pour le menu déroulant!

// Fonction pour convertir une couleur hexadécimale en RGB afin d'appliquer la transparence avec nos couleurs du backend hex a rgb
function hexToRgb(hex) {
  const bigint = parseInt(hex.replace('#', ''), 16);
  const r = (bigint >> 16) & 255;
  const g = (bigint >> 8) & 255;
  const b = bigint & 255;
  return `${r}, ${g}, ${b}`;
}
</script>

<template>
  <div class="flex items-center justify-center">
    <!-- ExclusiveCard -->
    <div
        class="rounded-lg w-[290px] h-[380px] relative"
        :style="{
        backgroundColor: branding.colors.surface,
        boxShadow: '0 10px 10px rgba(0, 0, 0, 0.3)',
        borderColor: `rgba(${hexToRgb(branding.colors.secondary)}, 0.4)`,
        borderWidth: '1px',
      }"
    >
      <!-- Conteneur pour aligner le titre et le bouton -->
      <div
          class="flex items-center justify-between py-2 px-3"
          :style="{ color: branding.colors.onPrimary }"
      >
        <div class="text-md">Comment créer un logo</div>

        <!-- Bouton à trois points avec menu déroulant -->
        <v-menu v-model="menu" activator="parent" offset-y>
          <template #activator="{ props }">
            <button
                v-bind="props"
                class="text-gray-600"
                :style="{ color: branding.colors.onPrimary }"
            >
              <i class="mdi mdi-dots-vertical text-lg"></i>
            </button>
          </template>
          <v-list
              :style="{
              backgroundColor: branding.colors.secondary,
              color: branding.colors.onSecondary,
            }"
          >
            <v-list-item title="Modifier" @click="modifier" />
            <v-list-item title="Effacer" @click="effacer" />
            <v-list-item title="Reporter" @click="reporter" />
          </v-list>
        </v-menu>
      </div>

      <div class="relative h-[170px] overflow-hidden">
        <img
            src="/images/hutopymedia/banners/hutopyul.png"
            class="w-full h-full object-cover blur-md"
            alt="image"
        />
        <div class="absolute inset-0 flex items-center justify-center">
          <i
              class="mdi mdi-lock text-7xl p-2 rounded-full"
              :style="{
              color: branding.colors.secondary,
              border: `2px solid ${branding.colors.secondary}`,
            }"
          ></i>
        </div>
      </div>

      <div class="text-end pa-2 px-4" :style="{ color: branding.colors.onPrimary }">
        14-05-2024
      </div>

      <div class="text-justify px-4 text-md" :style="{ color: branding.colors.onPrimary }">
        Tutoriel sur comment s'assurer d'avoir un logo unique et percutant
        qui se démarque de la concurrence.
      </div>
    </div>
  </div>
</template>

<style scoped></style>

<script>
function modifier() {
  console.log("Modifier l'élément");
}
function effacer() {
  console.log("Effacer l'élément");
}
function reporter() {
  console.log("Reporter l'élément");
}
</script>
