'use client'

import { useState } from 'react'

interface ClusterFormationProps {
  systemInfo: any
  configData: any
  onComplete: (data: any) => void
  onBack?: () => void
  isCompleted: boolean
}

export default function ClusterFormation({ 
  systemInfo, 
  configData, 
  onComplete, 
  onBack, 
  isCompleted 
}: ClusterFormationProps) {
  const [config, setConfig] = useState({
    clusterMode: 'create',
    networkId: 'bzzz-cluster-001'
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onComplete({ cluster: config })
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      <div className="text-center py-12">
        <h3 className="text-lg font-medium text-gray-900 mb-2">
          Cluster Formation
        </h3>
        <p className="text-gray-600">
          Create a new cluster or join an existing BZZZ network.
        </p>
        <div className="mt-8">
          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-yellow-800">
            This component is under development. Cluster formation will be implemented here.
          </div>
        </div>
      </div>

      <div className="flex justify-between pt-6 border-t border-gray-200">
        <div>
          {onBack && (
            <button type="button" onClick={onBack} className="btn-outline">
              Back
            </button>
          )}
        </div>
        <button type="submit" className="btn-primary">
          {isCompleted ? 'Continue' : 'Next: Testing & Validation'}
        </button>
      </div>
    </form>
  )
}