'use client';

import { useState } from 'react';

export function ProfileStep({ onComplete }: { onComplete: () => void }) {
  const [name, setName] = useState('');
  const [role, setRole] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Save profile data
    onComplete();
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label className="block text-sm text-gray-300 mb-2">Full Name</label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="w-full px-4 py-2 bg-gray-900 border border-gray-700 rounded text-white"
          placeholder="Enter your name"
        />
      </div>
      <div>
        <label className="block text-sm text-gray-300 mb-2">Role</label>
        <select
          value={role}
          onChange={(e) => setRole(e.target.value)}
          className="w-full px-4 py-2 bg-gray-900 border border-gray-700 rounded text-white"
        >
          <option value="">Select your role</option>
          <option value="technical">Technical Admin</option>
          <option value="business">Business Owner</option>
          <option value="developer">Developer</option>
        </select>
      </div>
      <button
        type="submit"
        className="w-full px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors"
      >
        Continue
      </button>
    </form>
  );
}

