import type {FunctionComponent} from 'react'
import {Suspense} from 'react'
import ContactCard from '@/app/(authenticated)/contacts/_contactCard/contactCard'
import {Input} from '@/components/ui/input'
import PageTitle from '@/components/custom/pageTitle'
import {getContacts} from '@/dal/contacts'
import FavoriteSkeleton from '@/app/(authenticated)/contacts/_favoriteContacts/favoriteSkeleton'
import FavoritesList from '@/app/(authenticated)/contacts/_favoriteContacts/favoritesList'
import Link from 'next/link'
import {Button} from '@/components/ui/button'
import {Plus} from 'lucide-react'

interface ContactsPageProps {
  searchParams: Promise<{
    contactName?: string
  }>
}

const ContactsPage: FunctionComponent<ContactsPageProps> = async ({searchParams}) => {
  const {contactName} = await searchParams
  const contacts = await getContacts(contactName ?? '')

  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">
            <Suspense fallback={<FavoriteSkeleton />}>
              <FavoritesList />
            </Suspense>
          </div>
        </div>

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

          <form method="get">
            <Input placeholder="Search your contacts" name="contactName" defaultValue={contactName} />
          </form>

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

export default ContactsPage
