"use client";

import { useRouter } from "next/navigation";
import Link from "next/link";

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

interface BreadcrumbProps {
  items: BreadcrumbItem[];
}

export default function Breadcrumb({ items }: BreadcrumbProps) {
  const router = useRouter();

  return (
    <div
      style={{ backgroundColor: "#eceaea" }}
      className="w-full h-11 flex items-center gap-3 overflow-x-auto px-4 sm:px-5"
    >
        {/* Back button */}
        <button
          onClick={() => router.back()}
          className="flex h-7 w-7 items-center justify-center rounded-full hover:bg-gray-200 transition-colors"
          aria-label="Go back"
        >
          <svg className="w-4 h-4 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
          </svg>
        </button>

        {/* Crumbs */}
        <nav className="flex min-w-0 items-center gap-2 whitespace-nowrap">
          {items.map((item, index) => {
            const isLast = index === items.length - 1;
            return (
              <div key={index} className="flex items-center gap-2">
                {index > 0 && (
                  <span className="text-gray-400 text-[10px]">&bull;</span>
                )}
                {isLast ? (
                  <span className="text-sm font-semibold text-gray-800">
                    {item.label}
                  </span>
                ) : (
                  <Link
                    href={item.href ?? "#"}
                    className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
                  >
                    {item.label}
                  </Link>
                )}
              </div>
            );
          })}
        </nav>
    </div>
  );
}
