aragrp/components/blog-collapse-section.tsx

"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import type { CollapseBlockPayload } from "@/lib/blog-blocks";
import { Icon } from "@iconify/react";

interface BlogCollapseSectionProps {
  section: CollapseBlockPayload;
  /** Optional prefix for accordion item ids (e.g. for multiple sections on one page). */
  idPrefix?: string;
}


export function BlogCollapseSection({
  section,
  idPrefix = "collapse",
}: BlogCollapseSectionProps) {
  if (!section.items.length) return null;

  return (
    <div className="my-8 space-y-4 border rounded-xl p-6">
      {section.title ? (
        <h2 className="text-2xl font-bold !mt-0 mb-4 scroll-mt-24">
          {section.title}
        </h2>
      ) : null}
      <Accordion type="single" collapsible className="w-full gap-1">
        {section.items.map((item, i) => (
          <AccordionItem
            key={i}
            value={`${idPrefix}-${i}`}
            className="border-none !m-0 hover:bg-muted has-[[data-state=open]]:bg-muted px-4 rounded-md"
          >
            <AccordionTrigger className="group/trigger text-right hover:no-underline cursor-pointer py-4 [&>svg]:shrink-0">
              <span className="flex gap-1 items-center">
                <Icon
                  icon="lucide:circle-small"
                  className="size-5 group-data-[state=open]/trigger:hidden"
                />
                <Icon
                  icon="lucide:dot"
                  className="size-5 hidden group-data-[state=open]/trigger:inline-block"
                />
                {item.question}
              </span>
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground leading-relaxed text-justify">
              <div dangerouslySetInnerHTML={{ __html: item.answer }} />
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}