import React from 'react'
import figma from '@figma/code-connect'
import { ToolbarSectionLeft, ToolbarSectionRight } from '../section'
import { Toolbar, BaseToolbarContainer } from '.'

figma.connect(
    Toolbar,
    '<PLANVIEW_DESIGN_SYSTEM_FIGMA_DOCUMENT>?node-id=1539:8959',
    {
        variant: { Sections: 'Left and right' },
        props: {
            left: figma.children('Left placeholder'),
            right: figma.children('Right placeholder'),
        },
        example: ({ left, right }) => (
            <Toolbar label="Main toolbar">
                <ToolbarSectionLeft>{left}</ToolbarSectionLeft>
                <ToolbarSectionRight>{right}</ToolbarSectionRight>
            </Toolbar>
        ),
    }
)

figma.connect(
    Toolbar,
    '<PLANVIEW_DESIGN_SYSTEM_FIGMA_DOCUMENT>?node-id=1539:8959',
    {
        variant: { Sections: 'Left only' },
        props: {
            left: figma.children('Left placeholder'),
        },
        example: ({ left }) => (
            <Toolbar label="Main toolbar">
                <ToolbarSectionLeft>{left}</ToolbarSectionLeft>
            </Toolbar>
        ),
    }
)

figma.connect(
    BaseToolbarContainer,
    '<PLANVIEW_DESIGN_SYSTEM_FIGMA_DOCUMENT>?node-id=1539:8959',
    {
        variant: { Sections: 'Right only' },
        props: { right: figma.children('Right placeholder') },
        example: ({ right }) => (
            <BaseToolbarContainer aria-label="Main toolbar">
                <ToolbarSectionRight>{right}</ToolbarSectionRight>
            </BaseToolbarContainer>
        ),
    }
)