import { Panel } from "~/ui/Panel";

export function EmptyRepo({ cloneUrl, defaultBranch }: { cloneUrl: string; defaultBranch: string }) {
  const commands = [
    `git clone ${cloneUrl}`,
    "# or push an existing repository",
    `git remote add origin ${cloneUrl}`,
    `git push -u origin ${defaultBranch}`,
  ];
  return (
    <Panel title="This repository is empty">
      <div className="space-y-3 p-5 text-sm text-kumo-subtle">
        <p>Push some commits to get started. Use your username and a personal access token as the password.</p>
        <pre className="overflow-x-auto rounded-md border border-kumo-hairline bg-kumo-base p-4 font-mono text-xs leading-6 text-kumo-default">
          {commands.join("\n")}
        </pre>
      </div>
    </Panel>
  );
}