import Link from 'next/link';
import { useEffect, useState } from 'react';

export default function Home() {
  const [tasks, setTasks] = useState([]);

  // Fetch tasks from backend API
  useEffect(() => {
    fetch('/api/tasks')
      .then(res => res.json())
      .then(data => setTasks(data));
  }, []);

  return (
    <div className="container">
      <h1>FlashServe: Tasks Near You</h1>
      <Link href="/create-task">
        <button className="btn-primary">Post a Task</button>
      </Link>
      <div className="task-list">
        {tasks.map(task => (
          <div key={task.id} className="task-card">
            <h3>{task.title}</h3>
            <p>Budget: ${task.budget}</p>
          </div>
        ))}
      </div>
    </div>
  );
}