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;
    flex: 1 1 auto;

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

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

/**
 * Implementation of the [Toolbar Left Section Specification](https://design.planview.com/components/toolbar/toolbar#left-section)
 *
 * Unlike the `ToolbarSectionRight` component, this component will not automatically move items into a more menu.
 *
 * ### Usage
 *
 * ```tsx
 * import { ToolbarContainer, ToolbarSectionLeft } from '@planview/pv-toolbar'
 *
 * export const PageToolbar = () => (
 *     <ToolbarContainer>
 *         <ToolbarSectionLeft>
 *         ...
 *         </ToolbarSectionLeft>
 *     </ToolbarContainer>
 * )
 * ```
 */
export const ToolbarSectionLeft = React.forwardRef(ToolbarSectionLeftImpl)