'use client';

import { useRouter } from 'next/navigation';

export interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface BreadcrumbsProps {
  items: BreadcrumbItem[];
}

export default function Breadcrumbs({ items }: BreadcrumbsProps) {
  const router = useRouter();

  return (
    <nav className="flex items-center gap-2 text-sm mb-6">
      {items.map((item, index) => {
        const isLast = index === items.length - 1;

        return (
          <div key={index} className="flex items-center gap-2">
            {item.href && !isLast ? (
              <button
                onClick={() => router.push(item.href!)}
                className="text-gray-400 hover:text-primary-blue transition-colors"
              >
                {item.label}
              </button>
            ) : (
              <span className={isLast ? 'text-white font-medium' : 'text-gray-400'}>
                {item.label}
              </span>
            )}
            
            {!isLast && (
              <svg 
                className="w-4 h-4 text-gray-600" 
                fill="none" 
                viewBox="0 0 24 24" 
                stroke="currentColor"
              >
                <path 
                  strokeLinecap="round" 
                  strokeLinejoin="round" 
                  strokeWidth={2} 
                  d="M9 5l7 7-7 7" 
                />
              </svg>
            )}
          </div>
        );
      })}
    </nav>
  );
}