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';

const FeaturedCourses = () => {
  const { data : CourseList } = useSWR(APP_BASE_URL + '' , defaultFetcher)
  const courses = [
    {
      id: 1,
      title: 'Foundation course to under stand about software',
      category: 'Data & Tech',
      lessons: 23,
      duration: '1hr 30 min',
      price: 32.00,
      originalPrice: 89.00,
      instructor: {
        name : 'Micie John',
        	image: 'https://dummyimage.com/300'
      },
      rating: 4.5,
      reviews: 44,
      image: 'https://dummyimage.com/300'
    },
    {
      id: 2,
      title: 'Nidhies course to under stand about softwere',
      category: 'Mechanical',
      lessons: 29,
      duration: '2hr 30 min',
      price: 32.00,
      originalPrice: 89.00,
      instructor: {
        name : 'Micie John',
        	image: 'https://dummyimage.com/300'
      },
      rating: 4.5,
      reviews: 44,
      image: 'https://dummyimage.com/300'
    },
    {
      id: 3,
      title: 'Minws course to under stand about solution',
      category: 'Development',
      lessons: 25,
      duration: '1hr 40 min',
      price: 40.00,
      originalPrice: 89.00,
      instructor: {
        name : 'Micie John',
        	image: 'https://dummyimage.com/300'
      },
      rating: 4.5,
      reviews: 44,
      image: 'https://dummyimage.com/300'
    },
    {
      id: 3,
      title: 'Minws course to under stand about solution',
      category: 'Development',
      lessons: 25,
      duration: '1hr 40 min',
      price: 40.00,
      originalPrice: 89.00,
      instructor: {
        name : 'Micie John',
        	image: 'https://dummyimage.com/300'
      },
      rating: 4.5,
      reviews: 44,
      image: 'https://dummyimage.com/300'
    }
  ];

  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">
        
        {
          courses?.map((course : Record<string,any> , index) => {
            return(
              <CourseCard
                key={index}
                id={course.id}
                image ={course?.image}
                title ={course?.title}
                category = {course?.category}
                lessons = {course?.lessons}
                instructor = {course?.instructor}
                duration={course?.duration}
              />
            )
          })
        }
      </div>
    </div>
  );
};

export default FeaturedCourses;