export async function fetchProperties(query: string, currentPage: number) {
  noStore()
  const totalPropertiesToFetch = currentPage * PROPERTY_PER_PAGE;

  try {
    const properties = await sql`
      SELECT
        properties.*
      FROM properties
      JOIN categories ON properties.category_id = categories.id
      JOIN locations ON properties.location_id = locations.id
      WHERE 
        properties.price::text ILIKE ${`%${query}%`} OR
        locations.city ILIKE ${`%${query}%`} 
      ORDER BY properties.created_at DESC
      LIMIT ${totalPropertiesToFetch}
    `;

    return properties.rows;    
  } catch (error) {
    console.error('Database Error:', error);
    throw new Error('Failed to fetch properties.');
  }
}

export default async function PropertiesList({ query, currentPage }: PropertiesListTypes) {
  const properties = await fetchProperties(query, currentPage);

  return (
    <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-6 4xl:grid-cols-7 mb-6">
      {properties.map((property) => (
        <PropertyCard key={property.id} data={property} />
      ))}
    </div>
  )
}

'use client';

import { usePathname, useSearchParams } from 'next/navigation';
import Link from 'next/link';

export default function Pagination({ totalPages }: { totalPages: number }) {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const currentPage = Number(searchParams.get('page')) || 1;

  const createPageURL = (pageNumber: number | string) => {
    const params = new URLSearchParams(searchParams);
    params.set('page', pageNumber.toString());
    return `${pathname}?${params.toString()}`;
  };

  return (
    <div className="inline-flex">
      <div className="flex mx-auto">
        {currentPage < totalPages && (
           <Link
            scroll={false}
            href={createPageURL(currentPage + 1)}
            className='px-6 py-2 border rounded text-emerald-50 font-medium bg-emerald-500'
          >
            Carregar mais
          </Link>
        )}
      </div>
    </div>
  );
}

// ...
<Suspense key={query + currentPage} fallback={<PropertyCardSkeletonList />}>
  <PropertiesList query={query} currentPage={currentPage} />
</Suspense>
<Pagination totalPages={totalPages} />
// ...