import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { RelativeTime } from "~/ui/RelativeTime";
import type { RepoSummary } from "~/lib/types";
import { TextLink } from "~/ui/TextLink";

export function RepoList({ repos, empty = "No repositories yet." }: { repos: RepoSummary[]; empty?: string }) {
  if (repos.length === 0) return <EmptyState title={empty} icon="repo" />;
  return (
    <ul className="divide-y divide-gray-800/80">
      {repos.map((repo, index) => (
        <li
          key={repo.id}
          className="animate-rise px-4 py-4"
          style={{ animationDelay: `${Math.min(index, 12) * 25}ms` }}
        >
          <div className="flex flex-wrap items-center gap-2">
            <TextLink
              to="/$owner/$repo"
              params={{ owner: repo.owner, repo: repo.name }}
              mono
              className="text-base font-medium"
            >
              <span className="text-gray-400">{repo.owner}/</span>
              {repo.name}
            </TextLink>
            {repo.visibility === "private" && <Badge>Private</Badge>}
            {repo.isArchived && <Badge tone="warning">Archived</Badge>}
            {repo.status !== "ready" && <Badge tone="warning">{repo.status}</Badge>}
          </div>
          {repo.forkOf && (
            <p className="mt-0.5 text-xs text-gray-500">
              forked from {repo.forkOf.owner}/{repo.forkOf.name}
            </p>
          )}
          {repo.description && <p className="mt-1.5 text-sm text-gray-400">{repo.description}</p>}
          <div className="mt-2 flex flex-wrap gap-4 text-xs text-gray-500">
            <span>★ {repo.starsCount}</span>
            <span>⑂ {repo.forksCount}</span>
            {repo.pushedAt && (
              <span>
                Updated <RelativeTime timestamp={repo.pushedAt} />
              </span>
            )}
          </div>
        </li>
      ))}
    </ul>
  );
}