import { serverGet } from '@/lib/api'
import type { Paginated, Provider } from '@/lib/types'
import { ProvidersBrowser } from '@/components/ProvidersBrowser'

export const metadata = {
  title: 'Doctors, Nutritionists & Trainers',
  description: 'Consult verified doctors, nutritionists and trainers on Fitorza. Book in-person or online video consultations.',
  alternates: { canonical: '/providers' },
  openGraph: {
    title: 'Doctors, Nutritionists & Trainers · Fitorza',
    description: 'Consult verified health professionals. Book in-person or online video consultations.',
    type: 'website',
    url: '/providers',
  },
}

async function getInitial(): Promise<Provider[]> {
  try { const r = await serverGet<Paginated<Provider>>('/providers?sort=rating', 300); return r.data ?? [] } catch { return [] }
}

export default async function ProvidersPage() {
  const initial = await getInitial()
  return (
    <div className="container-x py-8">
      <h1 className="h-section">Doctors, nutritionists &amp; trainers</h1>
      <p className="mt-1 text-sm text-muted">Verified health professionals. Book in-person or online video consultations — no booking fee.</p>
      <div className="mt-6">
        <ProvidersBrowser initial={initial} />
      </div>
    </div>
  )
}