import { BreadcrumbProps, Breadcrumb, Breadcrumbs } from '@blueprintjs/core';
import { createBoard } from '@wixc3/react-board';

// board cover
import cover from '../../../../assets/breadcrumbs/collapse-from-start.svg';

const BREADCRUMBS: BreadcrumbProps[] = [
    { href: '/users', icon: 'folder-close', text: 'Users' },
    { href: '/users/janet', icon: 'folder-close', text: 'Janet' },
    { icon: 'document', text: 'image.jpg' },
];

const renderCurrentBreadcrumb = ({ text, ...restProps }: BreadcrumbProps) => {
    return <Breadcrumb {...restProps}>{text}</Breadcrumb>;
};

export default createBoard({
    name: 'Breadcrumbs',
    Board: () => (
        <Breadcrumbs
            collapseFrom={'start'}
            currentBreadcrumbRenderer={renderCurrentBreadcrumb}
            items={BREADCRUMBS}
        />
    ),
    tags: ['breadcrumb', 'navigation'],
    cover,
});
