interface Props {
  series?: string;
  season?: number;
  onNavigate: (target: "root" | "series") => void;
}

export function BreadcrumbNav({ series, season, onNavigate }: Props) {
  return (
    <nav className="flex items-center gap-1 px-1 py-2 text-sm">
      <button
        type="button"
        className="text-zinc-400 hover:text-zinc-100 transition-colors"
        onClick={() => onNavigate("root")}
      >
        Library
      </button>
      {series && (
        <>
          <span className="text-zinc-600">›</span>
          {season != null ? (
            <button
              type="button"
              className="text-zinc-400 hover:text-zinc-100 transition-colors"
              onClick={() => onNavigate("series")}
            >
              {series}
            </button>
          ) : (
            <span className="text-zinc-100">{series}</span>
          )}
        </>
      )}
      {season != null && (
        <>
          <span className="text-zinc-600">›</span>
          <span className="text-zinc-100">Season {season}</span>
        </>
      )}
    </nav>
  );
}