'use client';

import { useState } from 'react';

export function PreferencesStep({ onComplete }: { onComplete: () => void }) {
  const [notifications, setNotifications] = useState(true);
  const [theme, setTheme] = useState('dark');

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

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label className="flex items-center gap-2 cursor-pointer">
          <input
            type="checkbox"
            checked={notifications}
            onChange={(e) => setNotifications(e.target.checked)}
            className="w-4 h-4"
          />
          <span className="text-sm text-gray-300">Enable email notifications</span>
        </label>
      </div>
      <div>
        <label htmlFor="onboarding-theme" className="block text-sm text-gray-300 mb-2">
          Theme
        </label>
        <select
          id="onboarding-theme"
          value={theme}
          onChange={(e) => setTheme(e.target.value)}
          className="w-full px-4 py-2 bg-gray-900 border border-gray-700 rounded text-white"
        >
          <option value="dark">Dark</option>
          <option value="light">Light</option>
          <option value="auto">Auto</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>
  );
}

