import React from 'react';
import Icon from '../../shared/components/icon';

interface AccordionProps {
  summary: React.ReactNode;
  children: React.ReactNode;
  defaultOpen?: boolean;
  className?: string;
}

export default function Accordion({ summary, children, defaultOpen = false, className = '' }: AccordionProps) {
  const [open, setOpen] = React.useState(defaultOpen);

  return (
    <div className={['accordion', open && 'accordion--open', className].filter(Boolean).join(' ')}>
      <button className="accordion__trigger" type="button" aria-expanded={open} onClick={() => setOpen((v) => !v)}>
        <span>{summary}</span>
        <span className="accordion__icon" aria-hidden>
          <Icon name="ui-chevron" width={20} height={20} />
        </span>
      </button>

      <div className="accordion__panel">
        <div className="accordion__panelInner">
          <div className="accordion__content">{children}</div>
        </div>
      </div>
    </div>
  );
}