import { Bot, FolderGit2 } from "lucide-react";

interface EmptyStateProps {
  readonly onConnectRepository: () => void;
  readonly busy: boolean;
  readonly repository: string;
  readonly onRepositoryChange: (value: string) => void;
}

export const EmptyState = ({
  busy,
  onConnectRepository,
  onRepositoryChange,
  repository,
}: EmptyStateProps) => (
  <div className="grid min-h-[60vh] place-items-center">
    <div className="max-w-md text-center">
      <div className="mx-auto grid size-14 place-items-center rounded-2xl bg-foreground text-background">
        <FolderGit2 className="size-6" />
      </div>
      <h2 className="mt-6 text-2xl font-semibold tracking-tight">
        Connect a project to begin
      </h2>
      <p className="mt-2 text-sm leading-6 text-muted-foreground">
        Import a repository to start the Work OS loop. Turn a clear outcome into
        a Work Unit that Zopu can start, verify, and review.
      </p>
      <form
        className="mx-auto mt-6 max-w-sm space-y-3"
        onSubmit={(event) => {
          event.preventDefault();
          onConnectRepository();
        }}
      >
        <input
          aria-label="Public Git repository URL"
          className="w-full rounded-xl border border-border/40 bg-card/40 px-4 py-2.5 text-sm outline-none placeholder:text-muted-foreground/60 focus-visible:border-foreground/20"
          onChange={(event) => onRepositoryChange(event.target.value)}
          placeholder="https://github.com/owner/repo"
          required
          value={repository}
        />
        <button
          className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-foreground px-4 py-2.5 text-sm font-medium text-background transition-opacity hover:opacity-90 disabled:opacity-60"
          disabled={busy}
          type="submit"
        >
          <Bot className="size-4" />
          {busy ? "Connecting" : "Connect repository"}
        </button>
      </form>
    </div>
  </div>
);