import React, { Suspense } from 'react'
import type { Metadata } from 'next'
import { SearchPageProps } from '@/app/types'
import { fetchRoutes } from '@/lib/search/fetchRoutes'
import AddressSelector from '@/components/AddressSelector'
import ClientResults from '../components/ClientResults'

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: 'Поиск перевозчиков и посылок | Tripwb',
    description:
      'Найдите самые быстрые варианты по перевозке своих посылок | Tripwb - текст текст текст',
    openGraph: {
      title: 'Поиск текст текст | Tripwb - текст текст текст',
      description: 'Найдите лучшие что то',
      url: 'https://tripwb.com/search',
      siteName: 'TripWB',
      images: [
        {
          url: 'https://i.ibb.co/gmqzzmb/header-logo-mod-1200x630.png',
          width: 1200,
          height: 630,
          alt: 'Tripwb - текст текст текст',
        },
      ],
      locale: 'ru_RU',
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      title: 'Поиск текст текст | TripWB',
      description: 'Ттекст текст текст текст',
      images: [
        {
          url: 'https://i.ibb.co/gmqzzmb/header-logo-mod-1200x630.png',
          width: 1200,
          height: 630,
          alt: 'Tripwb - текст текст текст',
        },
      ],
    },
    alternates: {
      canonical: 'https://tripwb.com/search/',
    },
    robots: {
      index: true,
      follow: true,
    },
  }
}

export default async function SearchPage(props: SearchPageProps) {
  const params = await props.params
  const { results, count } = await fetchRoutes(params.category || '')

  return (
    <div className="container mx-auto p-4">
      <h1 className="mb-4 text-2xl font-bold">
        {params.category === 'mover'
          ? 'Поиск перевозчика - все предложения'
          : 'Поиск посылки - все предложения'}
      </h1>
      <AddressSelector is_search={true} />

      <Suspense fallback={<div>Загрузка результатов...</div>}>
        <ClientResults initialResults={results} />
      </Suspense>
    </div>
  )
}