﻿<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-form>
        <v-card class="text-center rounded-xl"
                :style="{ 
                border: `3px solid ${creator.colors.menu}` 
              }">

          <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
            <div class="flex-1 text-center">
              {{ creator.about.title }}
            </div>

            <v-btn icon @click="cancelPost" class="ml-auto mr-2" variant="text">
              <v-icon>mdi-close</v-icon>
            </v-btn>
          </div>

          <v-card-text class="scrollable-content">
            {{ creator.about.description }}
          </v-card-text>

          <div class="p-4">
            <v-btn variant="outlined" text class=" w-full" @click="AboutUs = false" :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }">Fermer</v-btn>
          </div>

        </v-card>
      </v-form>
    </v-dialog>

  </div>
</template>

<script setup>
import {ref} from 'vue';

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;
}

</style>
