import * as React from 'react'
import styled from 'styled-components'
import { align, spacing } from '@planview/pv-utilities'

const Section = styled.div`
    ${align.centerV};
    min-width: 0;

    > *:not(:last-child) {
        margin-right: ${spacing.small}px;
    }
`

const ToolbarSectionImpl: React.ForwardRefRenderFunction<
    HTMLDivElement,
    React.ComponentPropsWithoutRef<'div'>
> = ({ children, ...otherProps }, ref) => (
    <Section {...otherProps} ref={ref}>
        {children}
    </Section>
)

/**
 * This is a generic ToolbarSection that will use as little of the available
 * room as possible to render its contents.
 *
 * Generally, it is recommended to instead use `ToolbarSectionLeft` or `ToolbarSectionRight` as needed.
 */
export const ToolbarSection = React.forwardRef(ToolbarSectionImpl)