import { useRouteLoaderData } from 'react-router'

import { Card } from '~/components/ui/card'
import { CategorySection } from '~/components/ui/category-section'
import type { loader } from '~/routes/_news.search'

export const NewsSearchPage = () => {
  const loaderData = useRouteLoaderData<typeof loader>('routes/_news.search')
  const { newsData, query } = loaderData || {}

  return (
    <div className="relative">
      <Card>
        <CategorySection
          title="Hasil pencarian:"
          description={query || ''}
          items={newsData || Promise.resolve({ data: [] })}
        />
      </Card>
    </div>
  )
}