import { Link } from "@tanstack/react-router";
import type { getProject } from "~/fns/projects";

export type ProjectData = Awaited<ReturnType<typeof getProject>>;
export type ProjectItem = ProjectData["items"][number];
export type ProjectField = ProjectData["fields"][number];

/** Title cell for a project item: a link to the issue/PR, or the draft note text. */
export function ItemTitle({ item }: { item: ProjectItem }) {
  if (!item.issue) return <span className="text-kumo-default">{item.note}</span>;
  const { issue } = item;
  return (
    <span className="flex min-w-0 items-center gap-2">
      <span className={issue.state === "open" ? "text-kumo-success" : "text-kumo-subtle"} aria-label={issue.state}>
        {issue.isPull ? "⇄" : "●"}
      </span>
      <Link
        to={issue.isPull ? "/$owner/$repo/pull/$number" : "/$owner/$repo/issues/$number"}
        params={{ owner: issue.owner, repo: issue.repo, number: String(issue.number) }}
        className="truncate text-kumo-strong hover:text-accent-400"
      >
        {issue.title}
      </Link>
      <span className="shrink-0 text-xs text-kumo-inactive">
        {issue.repo}#{issue.number}
      </span>
    </span>
  );
}