import { useEffect } from 'react';
import { api } from '@nice/client';

function People() {
    // 使用 useQuery 钩子从 API 获取数据，限制查询结果数量为 10
    const { data } = api.staff.findMany.useQuery({
        take: 10, // 限制查询结果数量
    });
    // 当 data 发生变化时，打印数据到控制台
    useEffect(() => {
        console.log(data);
    }, [data]);

    return (
        <div>
            {
                // 遍历 data 并渲染每个元素
                data?.map((i) => {
                    return (
                        <table className='table-auto w-full'>
                            <thead>
                                <tr>
                                    <th className='px-4 py-2'>Username</th>
                                    <th className='px-4 py-2'>ID</th>
                                    <th className='px-4 py-2'>Showname</th>
                                    <th className='px-4 py-2'>Password</th>
                                    <th className='px-4 py-2'>Phone Number</th>
                                    <th className='px-4 py-2'>Order</th>
                                </tr>
                            </thead>
                            <tbody>
                                {data?.map((i) => (
                                    <tr key={i.id} className='hover:bg-gray-100'>
                                        <td className='border px-4 py-2'>{i.username}</td>
                                        <td className='border px-4 py-2'>{i.id}</td>
                                        <td className='border px-4 py-2'>{i.showname}</td>
                                        <td className='border px-4 py-2'>{i.password}</td>
                                        <td className='border px-4 py-2'>{i.phoneNumber}</td>
                                        <td className='border px-4 py-2'>{i.order}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    );
                })
            }
        </div>
    );
}

export default People;