'use client'

import { useStoreWithDevtools } from '@/app/stores/useStoreWithDevtools';
import { useTranslations } from 'next-intl';

export function TestComponent() {
	const t = useTranslations('Global');

	const setText1 = useStoreWithDevtools(s => s.setValue1);
	const setText2 = useStoreWithDevtools(s => s.setValue2);
	const text1 = useStoreWithDevtools(s => s.value1);
	const text2 = useStoreWithDevtools(s => s.value2);

	return (
		<div className="mb-4">
			<div className='mb-2'>
				<input
					className='border rounded-md mr-1'
					type="text"
					onChange={(e) => {
						setText1(Number(e.target.value))
					}}
				/>
				<span>{t('check')} {text1}</span>
			</div>
			<div>
				<input
					className='border rounded-md mr-1'
					type="text"
					onChange={(e) => {
						setText2(Number(e.target.value))
					}}
				/>
				<span>{t('violation')} {text2}</span>
			</div>
		</div>
	)
}