From e7e319ee041a4ee7bdde7a524fbbd724efd02344 Mon Sep 17 00:00:00 2001
From: Chesterkxng <cgoita00@gmail.com>
Date: Mon, 4 May 2026 22:09:48 +0200
Subject: [PATCH] chore: - level selection enabled - full i8n support

---
 src/pages/tools/string/text-compare/index.tsx | 65 ++++++++++++++++---
 1 file changed, 56 insertions(+), 9 deletions(-)

diff --git a/src/pages/tools/string/text-compare/index.tsx b/src/pages/tools/string/text-compare/index.tsx
index 1c57dce..a3ee528 100644
--- a/src/pages/tools/string/text-compare/index.tsx
+++ b/src/pages/tools/string/text-compare/index.tsx
@@ -2,24 +2,57 @@ import { Box } from '@mui/material';
 import { useState, useEffect } from 'react';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
+import { GetGroupsType } from '@components/options/ToolOptions';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolDiffResult from '@components/result/ToolDiffResult';
+import SelectWithDesc from '@components/options/SelectWithDesc';
 import { useTranslation } from 'react-i18next';
 import { compareTextsHtml } from './service';
+import { level, InitialValuesType } from './types';
+
+const initialValues: InitialValuesType = {
+  level: 'word'
+};
 
 export default function TextCompare({ title }: ToolComponentProps) {
   const { t } = useTranslation('string');
   const [inputA, setInputA] = useState<string>('');
   const [inputB, setInputB] = useState<string>('');
+  const [level, setLevel] = useState<level>('word');
   const [result, setResult] = useState<string>('');
 
   const compute = () => {
-    setResult(compareTextsHtml(inputA, inputB));
+    setResult(compareTextsHtml(inputA, inputB, level));
   };
 
   useEffect(() => {
     compute();
-  }, [inputA, inputB]);
+  }, [inputA, inputB, level]);
+
+  const getGroups: GetGroupsType<InitialValuesType> = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: t('textCompare.options.title'),
+      component: (
+        <Box>
+          <SelectWithDesc
+            selected={values.level}
+            options={[
+              { label: t('textCompare.options.wordLevel'), value: 'word' },
+              { label: t('textCompare.options.charLevel'), value: 'char' }
+            ]}
+            onChange={(value) => {
+              updateField('level', value);
+              setLevel(value);
+            }}
+            description={t('textCompare.options.levelDesc')}
+          />
+        </Box>
+      )
+    }
+  ];
 
   return (
     <ToolContent
@@ -27,13 +60,27 @@ export default function TextCompare({ title }: ToolComponentProps) {
       input={inputA}
       inputComponent={
         <Box display="flex" flexDirection="column" gap={2}>
-          <ToolTextInput value={inputA} onChange={setInputA} />
-          <ToolTextInput value={inputB} onChange={setInputB} />
+          <ToolTextInput
+            value={inputA}
+            onChange={setInputA}
+            title={t('textCompare.inputTitle')}
+          />
+          <ToolTextInput
+            value={inputB}
+            onChange={setInputB}
+            title={t('textCompare.inputTitle')}
+          />
         </Box>
       }
-      resultComponent={<ToolDiffResult value={result} isHtml />}
-      initialValues={{}}
-      getGroups={null}
+      resultComponent={
+        <ToolDiffResult
+          value={result}
+          title={t('textCompare.resultTitle')}
+          isHtml
+        />
+      }
+      initialValues={initialValues}
+      getGroups={getGroups}
       setInput={() => {
         setInputA('');
         setInputB('');
@@ -41,8 +88,8 @@ export default function TextCompare({ title }: ToolComponentProps) {
       }}
       compute={compute}
       toolInfo={{
-        title: t('textCompare.toolInfo.title'),
-        description: t('textCompare.toolInfo.description')
+        title: t('textCompare.title'),
+        description: t('textCompare.longDescription')
       }}
     />
   );