import './TextComparisonComponent.sass'
import { createSignal, createEffect } from 'solid-js'
import Input from '../../Input/Input'
import Button from '../../Button/Button'
import { diffChars, createPatch } from 'diff';



export default () => {
  const [firstText, setFirstText] = createSignal('')
  const [secondText, setSecondText] = createSignal('')

  createEffect(() => {
    const diffCharsResult = diffChars(firstText(), secondText())
    console.log(diffCharsResult)
  })

  return (
    <>
      <section class='section'>
        <div class='section__button'>
          <Button label="Compare Texts" />
        </div>

        <div class='section__inputs'>
          <Input value={firstText()} onChange={setFirstText} isTextField width={40} height={40} />
          <Input value={secondText()} onChange={setSecondText} isTextField width={40} height={40} />
        </div>
      </section>

      {/* <Input label="Plain Text" value={plainText()} onChange={setPlainText} isTextField></Input> */}

    </>
  )
}