import * as React from 'react'
import type { StoryFn, Meta } from '@storybook/react-webpack5'
import {
    Toolbar,
    ToolbarButtonEmpty,
    ToolbarButtonGhost,
    ToolbarSection,
    ToolbarSeparator,
} from '../'

import { Filter, PlusCircle } from '@planview/pv-icons'

export default {
    title: 'pv-toolbar/Sections/ToolbarSection',
    tags: ['autodocs'],
    component: ToolbarSection,
    argTypes: {
        children: {
            name: 'children',
            description: 'Toolbar components to display in the section',
            control: false,
        },
    },
} satisfies Meta<typeof ToolbarSection>

export const Default: StoryFn<typeof ToolbarSection> = () => (
    <Toolbar label="demo">
        <ToolbarSection>
            <ToolbarButtonEmpty
                onClick={() => console.log('hit button filter')}
                icon={<Filter />}
                tooltip="Filter"
                aria-label="Filter"
            />
            <ToolbarSeparator />
            <ToolbarButtonGhost
                icon={<PlusCircle />}
                onClick={() => {
                    console.log('hit button activity')
                }}
            >
                Add Activity
            </ToolbarButtonGhost>
        </ToolbarSection>
    </Toolbar>
)

Default.storyName = 'ToolbarSection'