import type { Metadata } from "next";
import { SlidersHorizontal } from "lucide-react";
import { ListingCard } from "@/components/site/listing-card";
import { SearchBar } from "@/components/site/search-bar";
import { loadListings } from "@/lib/listings";

export const metadata: Metadata = { title: "Find a stay" };

type Props = { searchParams: Promise<{ q?: string; guests?: string }> };

export default async function ListingsPage({ searchParams }: Props) {
  const { q = "", guests = "" } = await searchParams;
  const guestCount = Number(guests) || 0;
  const results = await loadListings({ q, guests: guestCount || undefined });

  return (
    <div className="mx-auto max-w-7xl px-5 py-12 sm:px-8">
      <div className="max-w-3xl"><p className="text-sm font-bold uppercase tracking-[.18em] text-ember">Find your place</p><h1 className="mt-3 text-4xl font-bold sm:text-5xl">Stay somewhere that inspires you.</h1><p className="mt-4 text-muted-foreground">Exceptional homes, warm welcomes, and room to settle in.</p></div>
      <div className="mt-9"><SearchBar compact /></div>
      <div className="mt-12 flex items-center justify-between border-b border-border pb-5">
        <p><span className="font-bold">{results.length} stays</span>{q && <span className="text-muted-foreground"> near “{q}”</span>}</p>
        <button className="flex items-center gap-2 rounded-xl border border-border bg-white px-4 py-2.5 text-sm font-bold" type="button"><SlidersHorizontal size={17} /> Filters</button>
      </div>
      {results.length ? <div className="mt-8 grid gap-7 md:grid-cols-2 lg:grid-cols-3">{results.map((listing) => <ListingCard key={listing.id} listing={listing} />)}</div> : (
        <div className="my-20 rounded-3xl border border-dashed border-border bg-white/50 p-12 text-center"><h2 className="text-2xl font-bold">No stays found</h2><p className="mt-2 text-muted-foreground">Try another destination or fewer guests.</p></div>
      )}
    </div>
  );
}