import { useParams, useRouteLoaderData } from 'react-router'

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

import { BERITA } from './data'

export const NewsCategoriesPage = () => {
  const parameters = useParams()
  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
  const { name, description } =
    loaderData?.categoriesData.find((item) => item.code === parameters.code) ||
    {}
  const { items } = BERITA

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