import { Link } from 'react-router-dom';

type BreadcrumbItem = {
    label: string;
    href?: string; // optional, jika tidak ada berarti item aktif
};

type BreadcrumbProps = {
    items: BreadcrumbItem[];
};

export const Breadcrumb = ({ items }: BreadcrumbProps) => {
    return (
        <ul className="flex space-x-2 rtl:space-x-reverse">
            {items.map((item, index) => (
                <li key={index} className={index !== 0 ? "before:content-['/'] ltr:before:mr-2 rtl:before:ml-2" : ''}>
                    {item.href ? (
                        <Link to={item.href} className="text-primary hover:underline">
                            {item.label}
                        </Link>
                    ) : (
                        <span>{item.label}</span>
                    )}
                </li>
            ))}
        </ul>
    );
};