import { useRouteLoaderData } from 'react-router'

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

export const NewsCategoriesPage = () => {
  const loaderData = useRouteLoaderData<typeof loader>(
    'routes/_news.category.$code',
  )
  const { categoryData, newsData } = loaderData || {}
  const { name, description } = categoryData || {}

  return (
    <div className="relative">
      <Card>
        <CategorySection
          title={name || ''}
          description={description || ''}
          items={newsData || []}
        />
      </Card>
    </div>
  )
}