﻿<template>
  <div>
    <button
        class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 mr-2"
        @click="AboutUs = true"
    >
      <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
    </button>

    <v-dialog v-model="AboutUs" max-width="500px">
      <v-card>
        <v-card-title>
          À propos
          <br><br>
          <div class="flex justify-center">      {{ creator.about }}</div>
          <br>
        </v-card-title>
        <v-card-text class="scrollable-content">
          {{ creator.description }}
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text class="ml-auto" @click="isModalOpen = false">Fermer</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup>

import {ref} from 'vue';
import {useUserStore} from "@/stores/user.js";

const AboutUs = ref(false);

const props = defineProps({
  creator: {type: Object, required: true},
});
</script>

<style scoped>
.scrollable-content {
  max-height: 600px;
  overflow-y: auto;

}

.scrollable-content::-webkit-scrollbar {
  width: 6px;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background-color: #A30E79;
  border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
  background-color: #a21caf;
}

.transparent-btn {
  background-color: transparent;
  color: inherit;
  box-shadow: none;
}
</style>