import { Link } from 'react-router';

export interface BreadcrumbInterface {
    title: string;
    path: string;
}

export default function PageHeader({ title, breadcrumb }: { title: string; breadcrumb?: BreadcrumbInterface[] }) {
    return (
        <div className="d-flex align-items-center mb-4 gap-2">
            <div>
                <ol className="breadcrumb fs-sm mb-1">
                    <li className="breadcrumb-item">
                        <Link to="/app/dashboard">Dashboard</Link>
                    </li>
                    {breadcrumb?.map((item: BreadcrumbInterface, index: number) => (
                        <li key={index} className="breadcrumb-item active" aria-current="page">
                            <Link to={item.path}>{item.title}</Link>
                        </li>
                    ))}
                </ol>
                <h4 className="main-title mb-0">{title}</h4>
            </div>
        </div>
    );
}