<template>
    <div class="responseSection">
        <h2 class="responseSection__title">
            <svg class="icon icon--blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
            </svg>
            Response
        </h2>

        <ResponseBox :is-loading="isLoading" :product-data="productData" :response-content="responseContent"/>
    </div>
</template>

<script>
import ResponseBox from "./responseBox.vue";

export default {
    name: 'responseSection',
    props: {
        isLoading: {
            type: Boolean,
            default: false
        },
        responseContent: {
            type: String,
            default: ''
        },
        productData: {
            type: Object,
            default: null,
        },
    },
    components: {ResponseBox}

}
</script>

<style lang="less" scoped>
.responseSection {
    margin-top: 2rem;

    &__title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-gray-800);
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}

/* -- Icons & Utilities -- */
.icon {
    height: 1.25rem;
    width: 1.25rem;
}

.icon--small {
    height: 1rem;
    width: 1rem;
}

.icon--blue {
    color: var(--color-blue-600);
}
</style>
