import Link from "next/link";
import type { ForkParent } from "@/lib/repos";
import { ForkIcon } from "./icons";
import { Label } from "./ui";

/** Marks a repository as a fork. */
export function ForkLabel() {
  return (
    <Label tone="accent">
      <ForkIcon /> Fork
    </Label>
  );
}

/** "forked from alice/app", linked; `parent` is null when the viewer can't see that repository. */
export function ForkedFrom({ parent, className = "" }: { parent: ForkParent | null; className?: string }) {
  return (
    <span className={`inline-flex min-w-0 items-center gap-1 type-meta text-ink3 ${className}`}>
      <ForkIcon width={12} height={12} className="shrink-0" />
      <span className="truncate">
        forked from{" "}
        {parent ? (
          <Link href={`/${parent.owner}/${parent.name}`} className="relative z-1 text-ink2 hover:text-ink hover:underline">
            {parent.owner}/{parent.name}
          </Link>
        ) : (
          "a repository you can't see"
        )}
      </span>
    </span>
  );
}