import clsx from 'clsx';
import Link from 'next/link';
import { MdHome } from 'react-icons/md';
import { Each } from '../../00-base';
/**
 * Breadcrumb component for rendering a breadcrumb navigation.
 *
 * @component
 * @example
 * // Example usage of Breadcrumb component
 * <Breadcrumb
 *   pathname={[{ path: '/home', name: 'Home' }, { path: '/about', name: 'About' }]}
 *   homeHref="/"
 *   className="custom-class"
 * />
 *
 * @param {Object} props - The properties of the Breadcrumb component.
 * @param {Segment[]} props.pathname - Array of segments representing the breadcrumb path.
 * @param {string} [props.homeHref='/'] - Optional URL for the home link.
 * @param {HTMLAttributes<HTMLDivElement>} [props.restProps] - Additional HTML attributes for the breadcrumb container.
 *
 * @returns {ReactNode} The rendered Breadcrumb component.
 */
export function Breadcrumb({ pathname, homeHref = '/', ...restProps }) {
    const homeHrefSegments = homeHref.split('/').filter((segment) => segment);
    const filteredPathNames = pathname.filter(({ path }) => !homeHrefSegments.includes(path));
    return (<div {...restProps} className={clsx('flex items-center', restProps.className)}>
      <span>
        <Link href={homeHref} className="text-xl">
          <MdHome />
        </Link>
      </span>
      {filteredPathNames.length > 0 && (<Each of={filteredPathNames} render={({ name, path }, index) => {
                const current = index + 1 === filteredPathNames.length;
                return (<span className={clsx("font-medium before:mx-1 before:content-['/']", current ? 'inline' : 'hidden md:inline')} key={path}>
                {!current ? (<Link href={path} className="hidden underline md:inline">
                    {name}
                  </Link>) : (<span className="text-gray-2 pointer-events-none">
                    {name}
                  </span>)}
              </span>);
            }}/>)}
    </div>);
}
//# sourceMappingURL=Breadcrumb.jsx.map