import React from 'react';
import CourseCard from '@/components/elements/CourseCard';
import useSWR from 'swr';
import { APP_BASE_URL } from '@/utils/constants';
import { defaultFetcher } from '@/helpers/fetch.helper';
import Link from 'next/link';
import { routes } from '@/lib/routes';

const FeaturedCourses = () => {
  const { data : CourseList } = useSWR(APP_BASE_URL + '/api/course/listAll' , defaultFetcher)

  console.log(CourseList)

  return (
    <div className="max-w-7xl mx-auto p-6">

      <div className="flex justify-between items-center my-12">
        <div>
          <h1 className="text-3xl font-bold">Featured Courses</h1>
          <h2 className="text-xl text-purple-700">View all featured courses</h2>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        
        {
          CourseList?.data?.length && CourseList?.data?.map((course : Record<string,any> , index) => {
            return(
              <Link href={routes.COURSE_INDIVIDUAL_PAGE.replace(':id' , course?.id)}>
                <CourseCard
                  key={index}
                  id={course.id}
                  image ={APP_BASE_URL + course?.coverImage}
                  title ={course?.title}
                  category = {course?.category?.name}
                  lessons = {course?.lessons}
                  instructor = {course?.instructor}
                  duration={course?.duration}
                />
              </Link>
            )
          })
        }
      </div>
    </div>
  );
};

export default FeaturedCourses;