import DashboardController from "@/actions/App/Http/Controllers/Dashboard/IndexController";
import { BreadcrumbItem } from "@/types";
import { Link } from "@inertiajs/react";
import { Breadcrumb } from "react-bootstrap";
import { RiHome3Fill } from "react-icons/ri";

interface Props {
    title: string;
    breadcrumb?: BreadcrumbItem[];
    showHomeIcon?: boolean;
}

export default function PageHeader({ title, breadcrumb, showHomeIcon }: Props) {
    return (
        <div className="mb-4">
            <h4 className="fw-semibold mt-1">{title}</h4>

            {!!breadcrumb && (
                <Breadcrumb className="small mb-0">
                    {!!showHomeIcon && showHomeIcon === true && (
                        <Breadcrumb.Item
                            linkAs={Link}
                            href={DashboardController.index.url()}
                        >
                            <RiHome3Fill size={20} className="mb-1" />
                        </Breadcrumb.Item>
                    )}

                    {breadcrumb.map((item, idx) => {
                        if (!!item.active && item.active === true) {
                            return (
                                <Breadcrumb.Item key={idx} active>
                                    {item.title}
                                </Breadcrumb.Item>
                            );
                        }

                        return (
                            <Breadcrumb.Item
                                key={idx}
                                linkAs={Link}
                                href={item.href}
                            >
                                {item.title}
                            </Breadcrumb.Item>
                        );
                    })}
                </Breadcrumb>
            )}
        </div>
    );
}