<script lang="ts" setup>
import { AiAnswerProvideKey } from '../../../../type'

interface Props {
  data: any
}
const props = defineProps<Props>()

const animated = inject(AiAnswerProvideKey)?.animated
</script>

<template>
  <div class="attachment-product-detail-wrap" :class="{ 'animate__animated animate__fadeIn': animated }">
    <div class="inner">
      <img src="@/assets/images/a-product-detail-icon.png" alt="">
      <span> {{ props.data.name }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.attachment-product-detail-wrap {
  // margin: 12px 0;
  // margin-top: 12px;
  .inner {
    background: rgba(41, 182, 253, 0.04);
    border-radius: 12px;
    box-sizing: border-box;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 0 !important;

    img {
      width: 14px;
      height: 14px;
      margin-right: 8px;
    }
    span {
      font-size: 12px;
      color: #6dd2fe;
      line-height: 16px;
    }
  }
}
</style>
