'use client'

import { useState } from 'react'

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

export default function NetworkConfiguration({ 
  systemInfo, 
  configData, 
  onComplete, 
  onBack, 
  isCompleted 
}: NetworkConfigurationProps) {
  const [config, setConfig] = useState({
    subnet: '192.168.1.0/24',
    primaryInterface: 'eth0',
    bzzzPort: 8080,
    mcpPort: 3000,
    webUIPort: 8080,
    autoFirewall: true
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onComplete({ network: 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">
          Network Configuration
        </h3>
        <p className="text-gray-600">
          Configure your cluster's network settings and firewall rules.
        </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. Network configuration 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: Security Setup'}
        </button>
      </div>
    </form>
  )
}