"use client";

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

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-md 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">
        {section.items.map((item, i) => (
          <AccordionItem
            key={i}
            value={`${idPrefix}-${i}`}
            className="border-b last:border-b-0 !m-0"
          >
            <AccordionTrigger className="text-right  hover:no-underline py-4 [&>svg]:shrink-0">
              {item.question}
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground leading-relaxed text-justify">
              {item.answer}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}