import { useState } from 'react';
import ReactMapGL from 'react-map-gl';

export default function CreateTask() {
  const [location, setLocation] = useState({ lat: 45.5017, lng: -73.5673 });
  const [title, setTitle] = useState('');
  const [budget, setBudget] = useState(15);

  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetch('/api/tasks', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title, budget, location }),
    });
    alert('Task posted!');
  };

  return (
    <div className="container">
      <h1>Post a New Task</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Fix my Wi-Fi..."
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          required
        />
        <input
          type="number"
          placeholder="Budget ($)"
          value={budget}
          onChange={(e) => setBudget(e.target.value)}
          required
        />
        <div className="map-container">
          <ReactMapGL
            latitude={location.lat}
            longitude={location.lng}
            zoom={14}
            onDragEnd={(e) => setLocation(e.viewState)}
            mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
          >
            <Marker latitude={location.lat} longitude={location.lng} />
          </ReactMapGL>
        </div>
        <button type="submit" className="btn-primary">Post Task</button>
      </form>
    </div>
  );
}