import React, { useState, useEffect } from 'react';
import { Table, Spin } from 'antd';
import { getAll } from '../services/entityService';

export default function ClientsManagement() {
  const [clients, setClients] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getAll('clients')
      .then(data => {
        const items = data.clients || {};
        const list = Object.entries(items).map(([name, obj]) => ({ key: name, ...obj }));
        setClients(list);
      })
      .finally(() => setLoading(false));
  }, []);

  const columns = [
    { title: 'Name', dataIndex: 'key', key: 'key' },
    { title: 'Ordner', dataIndex: 'dir', key: 'dir' }
  ];

  if (loading) {
    return <Spin />;
  }

  return <Table dataSource={clients} columns={columns} pagination={false} />;
}
