import type {FunctionComponent} from 'react'
import {useGetContacts} from '@/api/contactApi.ts'
import ContactCard from '@/pages/home/_contactCard/contactCard.tsx'
import AddContactForm from '@/pages/home/addContactForm.tsx'

const Contacts: FunctionComponent = () => {
  const {data: contacts} = useGetContacts()

  return (
    <>
      <AddContactForm />

      {contacts.map(c => (
        <ContactCard {...c} key={c.id} />
      ))}
    </>
  )
}

export default Contacts
