import { useToken, cx, css } from '@/theme'
import ActionIcon from '../action'
import IconItem from './IconRender.tsx'
import {  usePickerContext } from './context.tsx'
const Display = () => {

    const ctx = usePickerContext()

    const token = useToken()
    const DefaultIcon = (
            <div
                    className={cx(css`
                        width: 8px;
                        height: 8px;
                        border-radius: 50%; 
                        background: ${token.colorFillContent};
                    `)}
            />
    )

    return ( <ActionIcon
                    bordered={true}
                    onClick={() => ctx.actions.togglePanel()}
                    icon={!ctx.state.icon ? DefaultIcon : <IconItem {...ctx.state.icon as any} />} />
    )
}

export default Display