import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { api } from '../../api/client';

export const TaskList: React.FC = () => {
  const [Tasks, setTasks] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadTasks = async () => {
      try {
        const data = await api.Task.list();
        setTasks(data);
      } catch (error) {
        console.error('Failed to load Tasks:', error);
      } finally {
        setLoading(false);
      }
    };
    loadTasks();
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <div className="container mx-auto p-4">
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-2xl font-bold">Tasks</h1>
        <Link to="/Tasks/new" className="btn btn-primary">Create Task</Link>
      </div>
      <div className="space-y-2">
        {Tasks.map((Task: any) => (
          <div key={Task.id} className="card p-4">
            <Link to={`/Tasks/${Task.id}`} className="text-blue-600 hover:underline">
              {Task.title}
            </Link>
          </div>
        ))}
      </div>
    </div>
  );
};
