Agent Profile

// app/profile/page.tsx
import { notFound } from "next/navigation"
import { fetchAgentProfile } from "@pandaidx/widgets/server"
import { ProfileView } from "@/components/profile-view"

export default async function ProfilePage({ searchParams }: { searchParams: Promise<Record<string, string | string[] | undefined>> }) {
  const data = await fetchAgentProfile({ publicKey: process.env.NEXT_PUBLIC_PANDA_PUBLIC_KEY!, apiUrl: process.env.NEXT_PUBLIC_PANDA_API_URL, searchParams: await searchParams })
  if (!data) notFound()
  return <ProfileView data={data} />
}

// components/profile-view.tsx
"use client"
import Link from "next/link"
import { ListingGridCard, ListingGridRoot, MlsDisclaimers, useAgentProfile, useListingGrid, type AgentProfileData } from "@pandaidx/widgets/client"

const Cards = () => {
  const grid = useListingGrid()
  return (
    <>
      <div className="grid gap-6 md:grid-cols-3">{grid.listings.map((listing) => <ListingGridCard key={listing._id} listing={listing} />)}</div>
      <MlsDisclaimers className="mt-10" />
    </>
  )
}

export const ProfileView = ({ data }: { data: AgentProfileData }) => {
  const profile = useAgentProfile({ data })
  return (
    <main className="mx-auto max-w-6xl px-4 py-16">
      <h1 className="text-4xl">{profile.name}</h1>
      {profile.biography.map((text) => <p key={text} className="mt-4">{text}</p>)}
      {profile.emailHref ? <a href={profile.emailHref}>{profile.email}</a> : null}
      {profile.listings && profile.inventory ? (
        <section className="mt-12">
          {profile.hasOffice ? <div id="office-listings" /> : null}
          <nav id="listings" className="mb-6 flex gap-4">
            {profile.inventory.tabs.map((tab) => <Link key={tab.href} href={tab.href} aria-current={tab.selected}>{tab.label}</Link>)}
          </nav>
          <ListingGridRoot data={profile.listings}><Cards /></ListingGridRoot>
        </section>
      ) : null}
    </main>
  )
}