'use client'
import BreadCrumbNav from "@/components/(dashboard)/common/BreadCumbNav/BreadCrumbNav"
import ContentContainer from "@/components/(dashboard)/elements/ContentContainer"
import { PageHeading } from "@/components/(dashboard)/ui/title"
import CommonContainer from "@/components/elements/CommonContainer"
import AppContextProvider from "@/helpers/context/AppContextProvider"
import { defaultFetcher } from "@/helpers/fetch.helper"
import { routes } from "@/lib/routes"
import { APP_BASE_URL } from "@/utils/constants"
import AdminView from "@/views/AdminView"
import useSWR from "swr"
import CategoryTable from "./_partials/CategoryTable"


const CategoryIndexPage = () => {
    const CategoryListURL = `${APP_BASE_URL}/api/courses/getCategories`
    const { data, mutate, isLoading } = useSWR(CategoryListURL, defaultFetcher);

    return(
        <AppContextProvider>
            <AdminView>
                <CommonContainer>
                    <PageHeading>Categories</PageHeading>
                    <BreadCrumbNav breadCrumbItems={[
                        {
                            title: 'Dashboard',
                            href: routes.DASHBOARD_ROUTE
                        },
                        {
                            title: 'Categories',
                            href: routes.CATEGORY_INDEX_PAGE
                        },
                    ]}/>
                    <ContentContainer>
                        <div>
                            <CategoryTable
                                mutate={mutate}
                                isLoading={isLoading}
                                Data={data || []}
                            />
                        </div>
                    </ContentContainer>
                </CommonContainer>
            </AdminView>
        </AppContextProvider>
    )
}

export default CategoryIndexPage