import { GitHubConnectionPanel } from '@/components/github/github-connection-panel';
import { GitHubForkForm } from '@/components/spoons/github-fork-form';
import { NewSpoonForm } from '@/components/spoons/new-spoon-form';

const NewSpoonPage = () => (
  <main className='space-y-6'>
    <div>
      <h1 className='text-3xl font-semibold tracking-normal'>New Spoon</h1>
      <p className='text-muted-foreground mt-2 max-w-2xl'>
        Connect GitHub to create real forks, or add an existing managed fork
        manually.
      </p>
    </div>
    <GitHubConnectionPanel />
    <GitHubForkForm />
    <div>
      <h2 className='text-xl font-semibold tracking-normal'>
        Add an existing fork manually
      </h2>
      <p className='text-muted-foreground mt-2 max-w-2xl text-sm'>
        Use this path for non-GitHub providers or forks that already exist.
      </p>
    </div>
    <NewSpoonForm />
  </main>
);

export default NewSpoonPage;
