"use client";

import { memo } from "react";
import LayoutAccordion from "../../layout/Accordion";
import type { FaqAccordionViewProps } from "./Accordion.types";

/**
 * Figma: "Sections / Accordion" (22130-889248; mobile FAQ 22132-889380).
 * Inset: **4/32** stacked, **96/64** from `md` (22130:889249), **160/96** from `lg` (22130:889247 / 22135:890328).
 * Rows: **s** below `lg`, **m** at `lg`, **l** at `xl` via `xlSize`.
 * Section title: Large Heading below `lg`; X Large Heading at `lg`; XX Large Heading at `xl` (22135:890398).
 */
function FaqAccordionView({
  title,
  items,
  size,
  lgSize,
  xlSize,
  headingId,
  className = "",
}: FaqAccordionViewProps) {
  return (
    <section
      aria-labelledby={headingId}
      className={`bg-[var(--color-surface-default-secondary)] px-[var(--spacing-scale-004)] py-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-096)] md:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-160)] lg:py-[var(--spacing-scale-096)] ${className}`.trim()}
    >
      <div className="mx-auto flex w-full flex-col items-center gap-[var(--spacing-scale-096)] md:gap-[var(--spacing-scale-040)]">
        <h2
          id={headingId}
          className="w-full text-center font-bricolage-grotesque text-[length:var(--text-large-heading)] font-bold leading-[length:var(--text-large-heading--line-height)] text-[var(--color-content-default-brand-primary,#fefcc9)] lg:text-[length:var(--text-x-large-heading)] lg:leading-[length:var(--text-x-large-heading--line-height)] xl:text-[length:var(--text-xx-large-heading)] xl:leading-[length:var(--text-xx-large-heading--line-height)] xl:tracking-[var(--text-xx-large-heading--letter-spacing)]"
        >
          {title}
        </h2>
        <div className="w-full md:px-0">
          {items.map((item, index) => (
            <LayoutAccordion
              key={`${item.title}-${index}`}
              title={item.title}
              subhead={item.subhead}
              size={size}
              lgSize={lgSize}
              xlSize={xlSize}
            >
              {item.answer}
            </LayoutAccordion>
          ))}
        </div>
      </div>
    </section>
  );
}

FaqAccordionView.displayName = "FaqAccordionView";

export default memo(FaqAccordionView);