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

export const UserList: React.FC = () => {
  const [Users, setUsers] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadUsers = async () => {
      try {
        const data = await api.User.list();
        setUsers(data);
      } catch (error) {
        console.error('Failed to load Users:', error);
      } finally {
        setLoading(false);
      }
    };
    loadUsers();
  }, []);

  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">Users</h1>
        <Link to="/Users/new" className="btn btn-primary">Create User</Link>
      </div>
      <div className="space-y-2">
        {Users.map((User: any) => (
          <div key={User.id} className="card p-4">
            <Link to={`/Users/${User.id}`} className="text-blue-600 hover:underline">
              {User.name}
            </Link>
          </div>
        ))}
      </div>
    </div>
  );
};
