<script setup lang="ts">
import type { BlockData } from '@vigilkids/section-core'
import { safeUrl } 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 s = computed(() => props.settings)
const isDark = computed(() => s.value.variant === 'dark')
const blockOrder = computed(() => props.blockOrder)
const blocks = computed(() => props.blocks)

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-features-card" :class="{ dark: isDark }">
    <div class="blog-features-card-content">
      <h2 class="blog-features-card-title" v-bind="editableAttrs('title')">
        {{ s.title }}
      </h2>

      <ul class="blog-features-card-list">
        <template v-for="blockId in blockOrder" :key="blockId">
          <!-- eslint-disable-next-line vue/no-v-html -->
          <li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
        </template>
      </ul>

      <a
        :href="editorMode ? undefined : safeUrl(String(s.button_url || ''))"
        :class="isDark ? 'blog-btn green inverse' : 'blog-btn green'"
        target="_blank"
        rel="noopener noreferrer"
        v-bind="editableAttrs('button_text')"
      >
        {{ s.button_text }}
      </a>
    </div>

    <div class="blog-features-card-image-wrapper">
      <img
        :src="safeUrl(String(s.image_src || ''))"
        alt="Feature Image"
        class="blog-features-card-image"
      >
    </div>
  </div>
</template>

<style scoped>
.blog-features-card{align-items:center;background:#f7f8fa;border-radius:10px;display:flex;flex-direction:column;gap:20px;justify-content:space-between;margin-top:40px;padding:28px 12px}.blog-features-card.dark{background:#2e2e2e;color:#fff}.blog-features-card-content{max-width:426px}.blog-features-card-title{font-size:18px;font-weight:700;margin:0 0 16px;text-align:center}.blog-features-card-list{color:#666262;font-size:14px;font-weight:300;list-style-position:outside;list-style-type:disc;margin:0 0 20px;padding-left:16px}.blog-features-card.dark .blog-features-card-list{color:inherit}.blog-features-card-list li+li{margin-top:8px}.blog-btn{align-items:center;border-radius:40px;cursor:pointer;display:flex;font-size:16px;font-weight:700;gap:8px;height:60px;justify-content:center;line-height:24px;margin:0 auto;min-width:270px;text-decoration:none}.blog-btn:before{background-color:currentColor;content:"";flex:0 0 16px;height:16px;mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/d7eed7caf7a3a302/magic.svg);-webkit-mask-image:url(https://cdn.visiva.ai/visiva/library/general/image/2026/06/15/d7eed7caf7a3a302/magic.svg);mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:contain;-webkit-mask-size:contain;width:16px}.blog-btn.green{background:linear-gradient(90deg,#33ff78,#caff33);color:#000}.blog-btn.green:hover{background:linear-gradient(270deg,#33ff78,#caff33)}.blog-btn.green.inverse{color:#fff}.blog-features-card-image-wrapper{max-width:411px}.blog-features-card-image{border-radius:10px;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}@media (min-width:768px){.blog-features-card{border-radius:20px;flex-direction:row;gap:16px;padding:40px}.blog-features-card-title{font-size:20px;text-align:left}.blog-features-card-list{margin-bottom:28px}.blog-btn{margin:0;min-width:260px}.blog-features-card-image{border-radius:20px;min-height:239px}}@media (max-width:767px){.blog-btn{margin-left:auto;margin-right:auto;width:-moz-fit-content;width:fit-content}}
</style>
