import React from 'react'
import { useTranslation } from 'react-i18next'

import { RsvpReader } from './components/RsvpReader'
import { SearchBar } from './components/SearchBar'

import './App.css'
import { LangSelect } from './components/LangSelect'

import { Counter } from 'components/Counter'

export const App = () => {
  const { t } = useTranslation()
  return (
    <>
      <header>
        <h1>{t('title')}</h1>
        <SearchBar></SearchBar>
        <LangSelect />
      </header>
      <main>
        <RsvpReader></RsvpReader>
      </main>
      <footer>Made by Alfred Melch</footer>
      <Counter />
    </>
  )
}