import type {FunctionComponent} from 'react'
import {Input} from '@/components/ui/input'
import PageTitle from '@/components/custom/pageTitle'
import ContactCard from '@/app/authenticated/contacts/contactCard'
import FavoritesList from '@/app/authenticated/contacts/favoritesList'
import {Button} from '@/components/ui/button'
import {Plus} from 'lucide-react'

const ContactsPage: FunctionComponent = () => {

  return (
    <>
      <div className="container mx-auto p-4 grid">
        <div>
          <div className="mb-6">
            <PageTitle>Favorites</PageTitle>
          </div>
          <div className="flex flex-row gap-4">
            <FavoritesList />
          </div>
        </div>

        <div>
          <div className="flex justify-between items-center mb-6">
            <PageTitle>My contacts</PageTitle>
              <Button>
                <Plus /> Add New Contact
              </Button>
          </div>

          <form>
            <Input placeholder="Search your contacts" />
          </form>

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

export default ContactsPage
