'use client'
import { PageHeading } from "@/components/(dashboard)/ui/title"
import CommonContainer from "@/components/elements/CommonContainer"
import CourseCard from "@/components/elements/CourseCard"
import AppContextProvider from "@/helpers/context/AppContextProvider"
import { defaultFetcher } from "@/helpers/fetch.helper"
import { APP_BASE_URL } from "@/utils/constants"
import CommonView from "@/views/CommonView"
import React from "react"
import useSWR from "swr"

const AllCourseList : React.FC = () => {
  const { data } = useSWR(APP_BASE_URL + '/api/course/listAll' , defaultFetcher)

  console.log(data)
  return(
    <AppContextProvider>
      <CommonView>
        <CommonContainer>
          <PageHeading>All Courses</PageHeading>
          <div className="grid grid-cols-4 gap-4 mt-8">
            {
              data?.data?.length && data?.data?.map((course) => {
                return(
                  <CourseCard 
                  id={course?.id}
                  image={APP_BASE_URL + course?.coverImage}
                  title={course?.name}
                  category={course?.category?.name}
                  instructor={{
                    image : APP_BASE_URL + course?.author?.pfpFilename ,
                    name  :course?.author?.firstName
                  }}    

                  />
                )
              })
            }
          </div>
        </CommonContainer>
      </CommonView>
    </AppContextProvider>
  )
}

export default AllCourseList