import React from 'react'
import figma from '@figma/code-connect'
import { LogoAgilePlace } from '../logos'
import { ToolbarSectionLeft, ToolbarSectionRight } from '../section'
import { ProductSwitcher } from '../product-switcher'
import { NavigationBar } from '.'

figma.connect(
    NavigationBar,
    '<PLANVIEW_DESIGN_SYSTEM_FIGMA_DOCUMENT>?node-id=3386:19679',
    {
        props: {
            showLogoSeparator: figma.boolean('Separator', {
                true: true,
                false: false,
            }),
            productSwitcher: figma.boolean('Product switcher', {
                true: <ProductSwitcher products={[]} />,
                false: undefined,
            }),
            leftContent: figma.instance('↪Swap with (left content)'),
            rightContent: figma.instance('↪Swap with (right content)'),
        },
        example: ({
            showLogoSeparator,
            productSwitcher,
            leftContent,
            rightContent,
        }) => (
            <NavigationBar
                logo={<LogoAgilePlace />}
                productSwitcher={productSwitcher}
                showLogoSeparator={showLogoSeparator}
            >
                <ToolbarSectionLeft>{leftContent}</ToolbarSectionLeft>
                <ToolbarSectionRight>{rightContent}</ToolbarSectionRight>
            </NavigationBar>
        ),
    }
)