import Image from "next/image";

import { BreadcrumbItem } from "@/types";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";

export function AppBreadcrumb({
    path,
    description
}: {
    path: string | BreadcrumbItem[];
    description?: string;
}) {
    const t = useTranslations();

    const renderPath = () => {
        if (typeof path === "string") {
            return (
                <>
                    {t("routes.home")} / {path}
                </>
            );
        }

        return (
            <>
                <Link href="/" className="hover:opacity-70">
                    {t("routes.home")}
                </Link>

                {path.map((item, index) => (
                    <span key={index} className="inline-flex items-center gap-1">
                        <span>/</span>
                        {item.url ? (
                            <Link href={item.url} className="hover:opacity-70">
                                {item.title}
                            </Link>
                        ) : (
                            <span>{item.title}</span>
                        )}
                    </span>
                ))}
            </>
        );
    };

    return (
        <div className="w-full h-60 relative overflow-hidden grid place-items-center mb-12">
            <Image
                src={"/images/breadcrumb-bg.png"}
                alt="breadcrumb-mwaheb"
                width={1500}
                height={240}
                priority
                className="object-cover object-top absolute top-0 right-0 size-full z-20"
            />

            <div className="flex flex-col gap-2 justify-center items-center relative z-30 text-white">
                <p className="text-2xl max-w-80 md:max-w-[84dvw] md:text-5xl font-semibold text-center">
                    {description}
                </p>

                <p className="flex gap-2 items-center text-sm md:text-base">
                    {renderPath()}
                </p>
            </div>
        </div>
    );
}