import { CornerUpLeft } from 'lucide-react';
import { Link } from '#/components/atoms/link.jsx';
import { Identity } from '#/components/molecules/identity.jsx';
import { href } from '#/lib/navigation.jsx';
import { useSession } from '#/lib/session.jsx';

/**
 * Whose records the screen below is showing.
 *
 * Every screen under a space reads exactly one repo, and which one is carried
 * in the query rather than in the path, so nothing on the page says it. Opening
 * another member's repo lands on their records with the list that was clicked
 * no longer on screen, and without this there is no way back to one's own.
 *
 * @param {Object} props
 * @param {string} props.space
 * @param {string|null} [props.repo] - absent for the signed-in account's own
 */
export function RepoScope({ space, repo }) {
  const { session } = useSession();
  const own = !repo || repo === session.did;

  if (own) {
    return <div className="text-faint text-xs">Your repo in this space</div>;
  }

  return (
    <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 rounded-xl border border-key/25 bg-key/5 px-3.5 py-2.5">
      <span className="min-w-0 text-[13px] text-foreground">
        Reading <Identity did={repo} inline />
        {"'s repo, on their own server."}
      </span>
      <Link
        href={href('/space', { uri: space })}
        className="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-[13px]"
      >
        <CornerUpLeft className="size-3.5" />
        Your repo
      </Link>
    </div>
  );
}