import React from 'react';
import { Expandable } from '../expandable';
import { SectionContainer } from './components';
import { SectionProvider } from './context';
import type { SectionProps } from './types';

/**
 * Sections are information containers: they organise attributes of an object and group them in a way that makes sense depending on the purpose of a page.
 *
 * @type template
 * @status live
 * @tags layout-structure, objects-attributes
 *
 * @nested Header, Body, Divider, Title, Filters
 */
export const Section = ({
    children,
    className,
    style,
    testId,
    expanded,
    onExpand,
    defaultExpanded,
    expandable = false,
    ...props
}: SectionProps) => (
    <Expandable
        expanded={expanded}
        defaultExpanded={defaultExpanded}
        onExpanded={onExpand}
        isExpandable={expandable}
    >
        <SectionProvider expandable={expandable} {...props}>
            <SectionContainer className={className} style={style} testId={testId}>
                {children}
            </SectionContainer>
        </SectionProvider>
    </Expandable>
);