import * as React from 'react';
import { useState } from 'react';
import styles from './CollapseSection.module.scss';
import { Icon } from '../Icon/Icon';
import { IconName } from '../Icon/iconNames';

interface ICollapseSectionProps {
  title: string;
  icon: IconName;
  defaultOpen?: boolean;
  children: React.ReactNode;
}

/** Сворачиваемая секция формы: заголовок с иконкой и шевроном + тело. */
export const CollapseSection: React.FC<ICollapseSectionProps> = ({ title, icon, defaultOpen = true, children }) => {
  const [open, setOpen] = useState<boolean>(defaultOpen);

  return (
    <div className={styles.section}>
      <button type="button" className={styles.header} onClick={() => setOpen((prev) => !prev)}>
        <span className={styles.title}>
          <Icon name={icon} size="sm" />
          {title}
        </span>
        <span className={[styles.chevron, open ? styles.open : ''].filter(Boolean).join(' ')}>
          <Icon name="chevron-down" size="sm" />
        </span>
      </button>
      {open && <div className={styles.body}>{children}</div>}
    </div>
  );
};