import { LockIcon } from 'lucide-react';
import { Badge } from '#/components/atoms/badge.jsx';

/**
 * The repository's name over its home, with whether the world can read it:
 * the first thing the home says, whether the repository has files yet or
 * is waiting for its first push.
 * @param {{repo: string, space?: string}} props
 */
export function RepoHeading({ repo, space }) {
  return (
    <header className="flex flex-wrap items-center gap-3 border-border border-b pb-4">
      <h1 className="min-w-0 truncate font-semibold text-[20px] leading-tight tracking-[-0.01em]">
        {repo}
      </h1>
      <Badge className="font-sans">
        {space ? (
          <>
            <LockIcon className="mr-1 size-3" />
            Private
          </>
        ) : (
          'Public'
        )}
      </Badge>
    </header>
  );
}