import { Link, Breadcrumbs as MuiBreadcrumbs, BreadcrumbsProps as MuiBreadcrumbsProps } from '@mui/material';


export interface BreadcrumbData {
    label: string,
    url: string,
}

export interface BreadcrumbsProps extends MuiBreadcrumbsProps {
    data: BreadcrumbData[];
    onClick: (value: any) => void;
}

export const Breadcrumbs = ({ data, onClick, ...rest }: BreadcrumbsProps) => {

    function handleLinkClick(event: React.MouseEvent<HTMLAnchorElement>, value: BreadcrumbData): void {
        event.preventDefault();
        onClick(value); // Emits the value when a link is clicked
    }

    return (
        <MuiBreadcrumbs {...rest} aria-label="breadcrumb" className="font-regular text-xsmall">
            {data?.map((item, index) => (
                <Link key={index} underline="hover" className={index === data.length - 1 ? 'text-title' : 'text-placeholder'} href={item.url} onClick={(event) => handleLinkClick(event, item)}>
                    {item.label}
                </Link>
            ))}
        </MuiBreadcrumbs>
    );

}