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

    defineProps({
        question: {
            type: String,
            required: true
        },
        answer: {
            type: String,
            required: true
        }
    })

    const open = ref(false);

    const toggle = () => {
        open.value = !open.value;
    }
</script>

<template>
    <div class="card-faq">
        <div class="question-box" @click="toggle">
            <h3 class="question">{{ question }}</h3>
            <i v-if="!open" class="fa-solid fa-chevron-down icon-indicator"></i>
            <i v-else class="fa-solid fa-chevron-up icon-indicator"></i>
        </div>
        <p 
            v-if="open"
            class="answer">{{ answer }}</p>
    </div>
</template>

<style  scoped>
    .card-faq {
        width: 100%;
        padding: 12px 20px;
        background-color: white;
        /* background-color: rgb(184, 236, 234); */
        margin-bottom: 15px;
        filter: drop-shadow(0px 4px 4px rgba(0, 255, 255,0.3));
        border-radius: 13px;
    }
    .question-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .card-faq:hover {
        background-color: aqua;
    }

    .icon-indicator {
        font-size: 20px;
        color: #FBBA33;
    }
    .question {
        font-size: 1.3rem;
        font-weight: 500;
        color: #323030;
    }

    .answer {
        margin-top: 1rem;
        font-size: 1.1rem;
        font-weight: normal;
        color: #323030;
    }
</style>