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'

import { BERITA } from './data'

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

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