'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { useDroppable } from '@dnd-kit/core';
import React from 'react';
import { ChevronIcon } from '../../../icons/Chevron/index.js';
import './index.scss';
const baseClass = 'folderBreadcrumbs';
export function FolderBreadcrumbs({ breadcrumbs, className }) {
    return /*#__PURE__*/ _jsxDEV("div", {
        className: `${baseClass} ${className || ''}`.trim(),
        children: breadcrumbs?.map((crumb, index)=>/*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__crumb`,
                children: [
                    crumb.onClick ? /*#__PURE__*/ _jsxDEV(DroppableBreadcrumb, {
                        className: `${baseClass}__crumb-item`,
                        id: crumb.id,
                        onClick: crumb.onClick,
                        children: crumb.name
                    }, void 0, false, {
                        fileName: "src/elements/FolderView/Breadcrumbs/index.tsx",
                        lineNumber: 27,
                        columnNumber: 13
                    }, this) : crumb.name,
                    breadcrumbs.length > 0 && index !== breadcrumbs.length - 1 && /*#__PURE__*/ _jsxDEV(ChevronIcon, {
                        className: `${baseClass}__crumb-chevron`,
                        direction: "right"
                    }, void 0, false, {
                        fileName: "src/elements/FolderView/Breadcrumbs/index.tsx",
                        lineNumber: 38,
                        columnNumber: 13
                    }, this)
                ]
            }, index, true, {
                fileName: "src/elements/FolderView/Breadcrumbs/index.tsx",
                lineNumber: 25,
                columnNumber: 9
            }, this))
    }, void 0, false, {
        fileName: "src/elements/FolderView/Breadcrumbs/index.tsx",
        lineNumber: 23,
        columnNumber: 5
    }, this);
}
export function DroppableBreadcrumb({ id, children, className, onClick }) {
    const { isOver, setNodeRef } = useDroppable({
        id: `folder-${id}`,
        data: {
            id,
            type: 'folder'
        }
    });
    return /*#__PURE__*/ _jsxDEV("button", {
        className: [
            'droppable-button',
            className,
            isOver && 'droppable-button--hover'
        ].filter(Boolean).join(' '),
        onClick: onClick,
        ref: setNodeRef,
        type: "button",
        children: children
    }, void 0, false, {
        fileName: "src/elements/FolderView/Breadcrumbs/index.tsx",
        lineNumber: 65,
        columnNumber: 5
    }, this);
}

//# sourceMappingURL=index.js.map