import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { defaultFetcher } from "@/helpers/fetch.helper"
import { APP_BASE_URL } from "@/utils/constants"
import Image from "next/image"
import useSWR from "swr"

const MyCoursesListTabContent = () => {
  const  { data } = useSWR(APP_BASE_URL + '/api/course/myCourses' , defaultFetcher);
  console.log(data)

  return (
    <>
      <Card className='border border-purple-700/20 shadow shadow-purple-700/40'>
        <CardHeader>
            <CardTitle className="text-2xl text-purple-700">My Courses</CardTitle>
        </CardHeader>
        <CardContent>
            {
              data?.length && data.map((course : Record<string,any> , index : number) => {
                return(
                  <>
                    <Card
                        key={course.id}
                        className="hover:shadow-lg transition-shadow mb-4"
                      >
                      <CardContent className="p-6 flex gap-4">
                        <div >
                          <Image src="https://placehold.jp/400x250.png"alt="placeholder" width={400} height={250} className="w-[400] h-auto rounded-2xl"/>
                        </div>
                        <div>
                          <div className="flex items-start justify-between">
                            <div className="space-y-2">
                              <h3 className="text-xl font-semibold text-purple-700">
                                {course.name}
                              </h3>
                              <p className="text-gray-600">{course.description}</p>
                            </div>
                          </div>
          
                          <div className="mt-4 flex flex-wrap gap-4 text-sm text-gray-500">
                            <span className="flex items-center">
                              <span className="ml-1">{
                                course.publishedDate  == '1' 
                                  ? <Badge variant={'success'}>Published</Badge> 
                                  : course.publishedDate  == '1'  
                                    ? <Badge variant={'default'}>Pending</Badge> 
                                    : <Badge variant={'destructive'}>Rejected</Badge>
                                }
                              </span>
                            </span>
                            
                          </div>

                          <div className="mt-2 flex gap-4">
                            <span className="flex items-center">
                                <span className="font-medium">Enrolled:</span>
                                <span className="ml-1">
                                  {course.totalEnrolled ?? 0} students
                                </span>
                              </span>
                              <span className="flex items-center">
                                <span className="font-medium"></span>
                                <span className="ml-1">
                                  {course.activeDiscussionCount ?? 0} discussions
                                </span>
                              </span>
                              <span className="flex items-center">
                                <span className="font-medium">Published by:</span>
                                <span className="ml-1">{course?.author?.firstName ?? '-'}</span>
                              </span>
                          </div>
                        </div>
                        </CardContent>
                      </Card>
                  </>
                )
              })
            }
        </CardContent>
      </Card>
    </>
  )
}

export default MyCoursesListTabContent