import { spread, insert, memo, createComponent, effect, className, style, template } from 'solid-js/web';
import { OriginComponent, extendsEvent } from '@cn-ui/use';
import { Button } from '@cn-ui/core';

const _tmpl$ = /*#__PURE__*/template(`<div></div>`, 2),
      _tmpl$2 = /*#__PURE__*/template(`<span>/</span>`, 2);
const Breadcrumb = OriginComponent(props => {
  return (() => {
    const _el$ = _tmpl$.cloneNode(true);

    const _ref$ = props.ref;
    typeof _ref$ === "function" ? _ref$(_el$) : props.ref = _el$;

    spread(_el$, () => extendsEvent(props), false, true);

    insert(_el$, () => props.list().map((i, index) => {
      return [memo(() => index === 0 ? null : props.separator ?? _tmpl$2.cloneNode(true)), createComponent(Button, {
        size: "mini",
        text: true,
        onClick: () => props.onTrigger && props.onTrigger(index),
        children: i
      })];
    }));

    effect(_p$ => {
      const _v$ = props.class('flex cursor-pointer items-center rounded-lg px-4 py-1 text-slate-400'),
            _v$2 = props.style;

      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
      return _p$;
    }, {
      _v$: undefined,
      _v$2: undefined
    });

    return _el$;
  })();
});

export { Breadcrumb };
