<template>
  <div
    class="responseBox"
    :class="{
      'responseBox--loading': isLoading,
      'responseBox--active': responseContent,
    }"
  >
    <div v-if="!responseContent && !isLoading">No response yet.</div>
    <div v-else>{{ responseContent }}</div>
      <ProductLink
          :product-name="productName"
            v-if="productData && !isLoading"
          :url="productData.url"
        />
  </div>
</template>

<script>
import ProductLink from "./productLink.vue";

export default {
    name: 'responseBox',
    components: {ProductLink},
    props: {
        responseContent: {
            type: String,
            default: ''
        },
        isLoading: {
            type: Boolean,
            default: false
        },
        productData: {
            type: Object,
            default: null,
        },
    },
};
</script>

<style lang="less">
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}
.responseBox {
    background: linear-gradient(to bottom right, var(--bg-gray-50), var(--bg-gray-100));
    border: 2px solid var(--border-gray);
    border-radius: 0.75rem;
    padding: 1.5rem;
    color: var(--text-gray-600);
    min-height: 100px;
    transition: all 0.3s;

    &--loading {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    &--active {
        background: linear-gradient(to bottom right, #eff6ff, #eef2ff); /* blue-50 to indigo-50 */
        border-color: #bfdbfe; /* blue-200 */
        color: var(--text-gray-800);
    }
}

</style>
