import React from 'react';
import Link from 'next/link';
import { ChevronRight, Home } from 'lucide-react';

interface BreadcrumbItem {
    name: string;
    url: string;
}

interface BreadcrumbSchemaProps {
    items: BreadcrumbItem[];
    showUI?: boolean;
}

/**
 * Generates JSON-LD BreadcrumbList schema for SEO
 * Optionally renders visible breadcrumb navigation
 */
export function BreadcrumbSchema({ items, showUI = false }: BreadcrumbSchemaProps) {
    const breadcrumbSchema = {
        '@context': 'https://schema.org',
        '@type': 'BreadcrumbList',
        itemListElement: items.map((item, index) => ({
            '@type': 'ListItem',
            position: index + 1,
            name: item.name,
            item: item.url,
        })),
    };

    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
            />
            {showUI && (
                <nav aria-label="Breadcrumb" className="bg-white/95 backdrop-blur-sm border-b border-slate-200">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <ol className="flex items-center gap-1 py-3 text-sm">
                            {items.map((item, index) => (
                                <li key={item.url} className="flex items-center">
                                    {index > 0 && (
                                        <ChevronRight className="w-4 h-4 text-slate-400 mx-1" />
                                    )}
                                    {index === items.length - 1 ? (
                                        <span className="text-slate-600 font-medium truncate max-w-[200px]">
                                            {item.name}
                                        </span>
                                    ) : (
                                        <Link
                                            href={item.url.replace('https://qrmaster.io', '')}
                                            className="text-slate-500 hover:text-indigo-600 transition-colors flex items-center gap-1"
                                        >
                                            {index === 0 && <Home className="w-4 h-4" />}
                                            <span className="hidden sm:inline">{item.name}</span>
                                        </Link>
                                    )}
                                </li>
                            ))}
                        </ol>
                    </div>
                </nav>
            )}
        </>
    );
}

/**
 * Pre-configured breadcrumb for tool pages
 * Renders: Home > Free QR Code Tools > [Tool Name]
 */
export function ToolBreadcrumb({ toolName, toolSlug }: { toolName: string; toolSlug: string }) {
    const items: BreadcrumbItem[] = [
        { name: 'Home', url: 'https://www.qrmaster.net/' },
        { name: 'Free QR Code Tools', url: 'https://www.qrmaster.net/tools' },
        { name: toolName, url: `https://www.qrmaster.net/tools/${toolSlug}` },
    ];

    return <BreadcrumbSchema items={items} showUI={true} />;
}