import { useTranslation } from 'react-i18next'

import LanguageItems from './components/language-items/LanguageItems'
import ToDoList from './components/todo-list/ToDoList'
import ToDoAdd from './components/todo-add/ToDoAdd'

function App() {
  const { t } = useTranslation(['home', 'buttons'])

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        gap: '5px',
        alignItems: 'center',
      }}
    >
      <h3 style={{ textAlign: 'center' }}>ToDo List App</h3>
      <LanguageItems />
      <div>
        {t('title', { ns: ['home'] })} <br />
      </div>
      <ToDoAdd />
      <ToDoList />
    </div>
  )
}

export default App