import React from "react";

export function Accordion({ items = [], defaultOpen = [], multiple = true, className = "" }) {
  const [open, setOpen] = React.useState(defaultOpen);
  const toggle = (v) => {
    if (multiple) setOpen(open.includes(v) ? open.filter((x) => x !== v) : open.concat([v]));
    else setOpen(open.includes(v) ? [] : [v]);
  };
  return (
    <div className={className} data-slot="accordion">
      {items.map((item) => {
        const isOpen = open.includes(item.value);
        return (
          <div className="o-accordion__item" key={item.value} data-slot="accordion-item" data-open={isOpen ? "" : undefined}>
            <h3 style={{ display: "flex", margin: 0 }}>
              <button type="button" className="o-accordion__trigger" data-slot="accordion-trigger" aria-expanded={isOpen} onClick={() => toggle(item.value)}>
                {item.title}
                <svg className="o-accordion__indicator" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
              </button>
            </h3>
            {isOpen ? <div className="o-accordion__panel" data-slot="accordion-panel"><div className="o-accordion__panel-inner">{item.content}</div></div> : null}
          </div>
        );
      })}
    </div>
  );
}
