<script setup lang="ts">
import type { BlockData } from '@vigilkids/section-core'

import { computed } from 'vue'

import { useInlineEdit } from '../../../composables/useInlineEdit'

const props = defineProps<{
  blockOrder: string[]
  blocks: Record<string, BlockData>
  editorMode?: boolean
  settings: Record<string, unknown>
}>()

const emit = defineEmits<{
  (e: 'update:setting', key: string, value: unknown): void
  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
  (e: 'inline-edit-start', key: string): void
  (e: 'inline-edit-end'): void
  (e: 'undo-redo', action: 'redo' | 'undo'): void
}>()

const title = computed(() => (props.settings.title as string) || '')

const items = computed(() =>
  props.blockOrder
    .map(id => props.blocks[id])
    .filter((b): b is BlockData => !!b && b.type === 'faq_item'),
)

const { editableAttrs, blockEditableAttrs } = useInlineEdit({
  editorMode: () => !!props.editorMode,
  onSettingUpdate: (key, value) => emit('update:setting', key, value),
  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
  onEditStart: key => emit('inline-edit-start', key),
  onEditEnd: () => emit('inline-edit-end'),
  onUndoRedo: action => emit('undo-redo', action),
})
</script>

<template>
<div class="blog-qa-card2">
    <div class="blog-qa-card2-header">
      <h2 class="blog-qa-card2-title" v-bind="editableAttrs('title')">
        {{ title }}
      </h2>
    </div>

    <div
      v-for="(item, index) in items"
      :key="blockOrder[index]"
      :class="index === items.length - 1 ? 'blog-qa-card2-item-last' : 'blog-qa-card2-item'"
    >
      <h3 class="blog-qa-card2-question" v-bind="blockEditableAttrs(blockOrder[index], 'question')">
        {{ item.settings.question }}
      </h3>
      <!-- eslint-disable-next-line vue/no-v-html -->
      <div class="blog-qa-card2-answer" v-bind="blockEditableAttrs(blockOrder[index], 'answer')" v-html="item.settings.answer" />
    </div>
  </div>
</template>

<style scoped>
.blog-qa-card2{background:#f8fffb;border-radius:10px;font-size:14px;margin-top:40px;padding:28px 16px}.blog-qa-card2-header{align-items:center;display:flex;gap:12px;margin-bottom:16px}.blog-qa-card2-header:before{background-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/bb8010e4ebd03eb9/faq.svg);background-position:50%;background-repeat:no-repeat;background-size:contain;content:"";display:block;flex-shrink:0;height:20px;width:20px}.blog-qa-card2-title{color:#1fb04f;font-size:18px;font-weight:700;margin:0}.blog-qa-card2-item{margin-bottom:16px}.blog-qa-card2-item-last{margin-bottom:0}.blog-qa-card2-question{font-weight:700;margin:0 0 6px}.blog-qa-card2-answer{line-height:1.625;margin:0}@media (min-width:768px){.blog-qa-card2{border-radius:15px;font-size:16px;padding:28px 20px}.blog-qa-card2-title{font-size:20px}.blog-qa-card2-item{margin-bottom:24px}.blog-qa-card2-question{margin-bottom:12px}}
</style>
