import type {FunctionComponent} from 'react'
import PageTitle from '@/components/custom/pageTitle'
import {Input} from '@/components/ui/input'
import FavoriteSkeleton from '@/app/(authenticated)/contacts/_favoriteContacts/favoriteSkeleton'
import ContactCardSkeleton from '@/app/(authenticated)/contacts/_contactCard/contactCardSkeleton'
import Link from 'next/link'
import {Button} from '@/components/ui/button'
import {Plus} from 'lucide-react'

const Loading: FunctionComponent = () => {
  return (
    <>
      <div className="container mx-auto p-4 grid">
        <div>
          <div className="mb-6">
            <PageTitle>Favorites</PageTitle>
          </div>
          <FavoriteSkeleton />
        </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 action="/contacts" method="get">
            <Input placeholder="Search your contacts" name="contactName" disabled />
          </form>

          <ContactCardSkeleton />
        </div>
      </div>
    </>
  )
}

export default Loading
