"use client";
import React, { isValidElement, Children, PropsWithChildren } from "react";
import {
    Breadcrumb as UIBreadcrumb,
    BreadcrumbList,
    BreadcrumbSeparator
} from "@/components/ui/breadcrumb";
import { BreadcrumbItem } from "@/components/layout/breadcrumb/breadcrumb-item";

export type BreadcrumbProps = PropsWithChildren;

export const BreadcrumbComponent: React.FC<BreadcrumbProps> = (props) => {
    const { children } = props;

    return (
        <UIBreadcrumb>
            <BreadcrumbList>
                {Children.map(children, (child) => {
                    if(!isValidElement(child)) {
                        return null;
                    }

                    return (
                        <React.Fragment>
                            {child}

                            <BreadcrumbSeparator className="last:hidden" />
                        </React.Fragment>
                    );
                })}
            </BreadcrumbList>
        </UIBreadcrumb>
    );
};

export const Breadcrumb = Object.assign(BreadcrumbComponent, {
    Item: BreadcrumbItem
});