'use client';

import { useTRPC } from '@repo/client';

// import { api } from '@repo/client';
// import { Button } from '@repo/ui/components/button';
// import { useState } from 'react';
// import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
// import { httpBatchLink } from '@trpc/client';

// function HomeContent() {
// 	const [name, setName] = useState('');
// 	const helloQuery = api.hello.useQuery(name || undefined);

// 	return (
// 		<div className="p-4">
// 			<input
// 				type="text"
// 				value={name}
// 				onChange={(e) => setName(e.target.value)}
// 				placeholder="输入名字"
// 				className="border p-2 mr-2"
// 			/>
// 			<Button onClick={() => helloQuery.refetch()}>{helloQuery.isLoading ? '加载中...' : helloQuery.data}</Button>
// 		</div>
// 	);
// }

export default function Home() {
	// const [queryClient] = useState(() => new QueryClient());
	// const [trpcClient] = useState(() =>
	// 	api.createClient({
	// 		links: [
	// 			httpBatchLink({
	// 				url: 'http://localhost:3000/api/trpc',
	// 			}),
	// 		],
	// 	}),
	// );

	return (
		<div>123</div>
		// <QueryClientProvider client={queryClient}>
		// 	<api.Provider client={trpcClient} queryClient={queryClient}>
		// 		<HomeContent />
		// 	</api.Provider>
		// </QueryClientProvider>
	);
}