﻿<template>
  <div class="text-center rounded-t-lg p-4 tracking-widest uppercase"
       :style="{ color: userStore.creator.colors.onPrimary, backgroundColor: userStore.creator.colors.primary}">
    Récompenses
  </div>

  <div v-for="(item, index) in rewards"
       class="my-1 text-white"
       :key="index"
       :style="{ backgroundColor: userStore.creator.colors.primary }">
    
    <div class="flex justify-center border-b-2 border-white p-3 mx-2 text-xl tracking-[4px]">
      {{ item.title }}
    </div>
    
    <div class="p-3">
      <p v-if="item.description" class="text-gray-300 text-sm text-justify mt-1 py-1">
        {{ item.description }}
      </p>

      <div v-if="item.amount" class="flex flex-row justify-end space-x-2">
        <div class="text-right text-white">{{ item.amount }}$</div>
        <div>|</div>
        <div v-if="item.quantity"> Quantité: {{ item.quantity }}</div>
      </div>
      
    </div>
  </div>

</template>

<script setup>
import {ref, computed} from 'vue';
import {useUserStore} from "@/stores/userStore.js";

const userStore = useUserStore()

const rewards = ref([
  {
    title: 'Hoodie',
    description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
    amount: 50,
    quantity: 5,
    date: '2024-09-19',
  },
  {
    title: 'Small Talk',
    description: 'Ceci est la description du contenu.',
    amount: null,
    quantity: null,
    date: '2024-09-18',
  },
  {
    title: 'Les vrais choses',
    description: 'Nous sommes dans les derniers préparatifs, mais demain nous allons vous dévoiler la première partie du studio qui est complétée.',
    amount: 100,
    quantity: 10,
    date: '2024-09-17',
  },
  {
    title: 'On va changer le monde',
    description: 'Deuxième contenu avec description.',
    amount: 150,
    quantity: 1,
    date: '2024-09-16',
  },
  {
    title: 'Séance photo',
    description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
    amount: 150,
    quantity: 20,
    date: '2024-09-19',
  },
  {
    title: 'Séance photo',
    description: 'Je suis fier de vous montrer les installations sur lesquelles nous avons travaillé si fort.',
    amount: 150,
    quantity: 20,
    date: '2024-09-19',
  },
]);

</script>

