'use 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 (
		<QueryClientProvider client={queryClient}>
			<api.Provider client={trpcClient} queryClient={queryClient}>
				<HomeContent />
			</api.Provider>
		</QueryClientProvider>
	);
}