import { useNavigate } from 'react-router-dom'
import { useAppPath } from '@core/hooks/useAppPath'
import { KBArticleList } from '@core/components/kb/KBArticleList'

const KB_TYPE_SLUGS = ['kb-spine-admin', 'kb-spine-internal', 'kb-spine-public', 'kb-account']

export default function KBPage() {
  const navigate = useNavigate()
  const appPath = useAppPath()

  return (
    <div className="h-full min-h-0">
      <KBArticleList
        typeSlugs={KB_TYPE_SLUGS}
        typeName="Knowledge Base"
        onSelect={(record) => navigate(appPath(`/knowledge/articles/${record.id}`))}
        onNew={() => navigate(appPath('/knowledge/articles/new'))}
        onEdit={(record) => navigate(appPath(`/knowledge/articles/${record.id}/edit`))}
      />
    </div>
  )
}