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

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

import { BERITA } from './data'

export const NewsCategoriesPage = () => {
  const { pathname } = useLocation()
  const code = pathname.split('/')[2]
  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
  const { name } =
    loaderData?.categoriesData.find((item) => item.code === code) || {}
  const { items } = BERITA

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