'use client'

import { Button } from '@workspace/ui/components/button'
import { useState } from 'react'
import { useOnboarding } from '../store'

type ConnectState = 'initial' | 'repository-select' | 'template-select'

/**
 * First step in the onboarding flow
 * Handles GitHub connection and repository selection
 *
 * States:
 * - initial: Shows GitHub connect button
 * - repository-select: Shows list of repositories
 * - template-select: Shows available templates
 *
 * @component
 */
export function ConnectStep() {
  const [connectState, setConnectState] = useState<ConnectState>('initial')
  const [projectName, setProjectName] = useState('')
  const { setFormData, nextStep } = useOnboarding()

  const handleConnect = () => {
    setConnectState('repository-select')
  }

  return (
    <div className="max-w-2xl w-full">
      {/* <ConnectAccountTabPanel />\ */}
      {connectState === 'initial' ? (
        <div className="flex flex-col items-center justify-center gap-6 p-8">
          <h2 className="text-2xl font-semibold text-center">
            Connect to GitHub
          </h2>
          <p className="text-center text-muted-foreground">
            Connect your GitHub account to get started
          </p>
          <Button onClick={handleConnect} />
        </div>
      ) : (
        // <ConnectAccount onAuth={() => {}} />
        <>...connect goes here</>
      )}
    </div>
  )
}