import Link from "next/link";
import Image from 'next/image';
import Arrow from "../../../../public/images/breadcrumbs-arrow.svg";

export interface BreadcrumbItem {
    title?: string;
    url?: string;
}

interface BreadcrumbProps {
    items?: BreadcrumbItem[];
}

export default function Breadcrumbs({ items }: BreadcrumbProps) {
    if (!items || items.length === 0) return null;

    return (
        <nav aria-label="Breadcrumb" className="py-3">
            <div className="container">
                <ul className="flex flex-wrap items-center gap-2 text-[14px]">
                    {items.map((item, index) => {
                        const title = item.title;
                        const rawUrl = item.url;
                        // Dynamically strip '-fr' suffix from API breadcrumb URLs
                        const url = rawUrl ? rawUrl.replace(/-fr$/i, "") : undefined;
                        const isLast = index === items.length - 1;

                        return (
                            <li key={index} className="flex items-center gap-2">
                                {url && !isLast ? (
                                    <Link
                                        href={url}
                                        className="text-[12px] md:text-[14px] text-[#334D72] font-medium hover:underline"
                                    >
                                        {title}
                                    </Link>
                                ) : (
                                    <span className={`text-[12px] md:text-[14px] ${isLast ? "text-[#1718FF]" : "text-[#334D72]"} font-medium`}>
                                        {title}
                                    </span>
                                )}

                                {!isLast && (
                                    <span className="text-[#94A3B8]">
                                        <Image src={Arrow} width={12} height={12} alt="arrow" />
                                    </span>
                                )}
                            </li>
                        );
                    })}
                </ul>
            </div>
        </nav>
    );
}