'use client';
import LinkWithDefault from 'next/link.js';
const Link = LinkWithDefault.default;
import React from 'react'; // TODO: abstract this out to support all routers
import { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js';
const baseClass = 'pill';
const DraggablePill = (props)=>{
    const { id, className } = props;
    const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({
        id
    });
    return /*#__PURE__*/ React.createElement(StaticPill, {
        ...props,
        className: [
            isDragging && `${baseClass}--is-dragging`,
            className
        ].filter(Boolean).join(' '),
        elementProps: {
            ...listeners,
            ...attributes,
            ref: setNodeRef,
            style: {
                transform
            }
        }
    });
};
const StaticPill = (props)=>{
    const { alignIcon = 'right', 'aria-checked': ariaChecked, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, children, className, draggable, elementProps, icon, onClick, pillStyle = 'light', rounded, to } = props;
    const classes = [
        baseClass,
        `${baseClass}--style-${pillStyle}`,
        className && className,
        to && `${baseClass}--has-link`,
        (to || onClick) && `${baseClass}--has-action`,
        icon && `${baseClass}--has-icon`,
        icon && `${baseClass}--align-icon-${alignIcon}`,
        draggable && `${baseClass}--draggable`,
        rounded && `${baseClass}--rounded`
    ].filter(Boolean).join(' ');
    let Element = 'div';
    if (onClick && !to) Element = 'button';
    if (to) Element = Link;
    return /*#__PURE__*/ React.createElement(Element, {
        ...elementProps,
        "aria-checked": ariaChecked,
        "aria-controls": ariaControls,
        "aria-expanded": ariaExpanded,
        "aria-label": ariaLabel,
        className: classes,
        href: to || '',
        onClick: onClick,
        type: Element === 'button' ? 'button' : undefined
    }, icon && alignIcon === 'left' && /*#__PURE__*/ React.createElement("span", {
        className: `${baseClass}__icon`
    }, icon), /*#__PURE__*/ React.createElement("span", {
        className: `${baseClass}__label`
    }, children), icon && alignIcon === 'right' && /*#__PURE__*/ React.createElement("span", {
        className: `${baseClass}__icon`
    }, icon));
};
export const Pill = (props)=>{
    const { draggable } = props;
    if (draggable) return /*#__PURE__*/ React.createElement(DraggablePill, props);
    return /*#__PURE__*/ React.createElement(StaticPill, props);
};
export default Pill;

//# sourceMappingURL=index.js.map