"use client";
import React, { PropsWithChildren } from "react";
import {
    BreadcrumbItem as UIBreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbPage
} from "@/components/ui/breadcrumb";

export type BreadcrumbItemProps = PropsWithChildren<{
    active?: boolean;
    href?: string;
}>;

export const BreadcrumbItem: React.FC<BreadcrumbItemProps> = (props) => {
    const {
        href,
        children
    } = props;

    return (
        <UIBreadcrumbItem className="[&:last-child_.separator]:hidden">
            {href ? (
                <BreadcrumbLink href={href}>{children}</BreadcrumbLink>
            ) : (
                <BreadcrumbPage>{children}</BreadcrumbPage>
            )}
        </UIBreadcrumbItem>
    );
};