"use client";

import * as React from "react";
import { ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export type DrillBreadcrumbItem = {
  label: string;
  onClick?: () => void;
};

type MarketingDrillBreadcrumbProps = {
  items: DrillBreadcrumbItem[];
  onBack?: () => void;
  backLabel?: string;
};

export function MarketingDrillBreadcrumb({
  items,
  onBack,
  backLabel = "Back",
}: MarketingDrillBreadcrumbProps) {
  const currentIndex = items.length - 1;

  return (
    <div className="flex flex-wrap items-center gap-2 rounded-xl border border-white/40 bg-white/40 px-3 py-2">
      {onBack ? (
        <Button
          type="button"
          variant="ghost"
          size="sm"
          className="h-11 min-w-11 rounded-lg px-3 text-xs font-semibold"
          onClick={onBack}
        >
          {backLabel}
        </Button>
      ) : null}
      <nav
        aria-label="Drill-down navigation"
        className="flex min-w-0 flex-wrap items-center gap-1"
      >
        {items.map((item, index) => (
          <React.Fragment key={`${item.label}-${index}`}>
            {index > 0 ? (
              <ChevronRight className="size-3.5 shrink-0 text-gray-400" aria-hidden />
            ) : null}
            <button
              type="button"
              disabled={!item.onClick}
              aria-current={index === currentIndex ? "page" : undefined}
              onClick={item.onClick}
              className={cn(
                "max-w-[180px] truncate px-1 py-2 font-['Lexend_Deca'] text-xs",
                item.onClick
                  ? "font-semibold text-[#6C63FF] hover:underline"
                  : "cursor-default font-bold text-[#1d1d39]",
              )}
            >
              {item.label}
            </button>
          </React.Fragment>
        ))}
      </nav>
    </div>
  );
}